I recently ran into a bit of scrolling problem on a project I was working on. The designed called for a DIV with a set height to display text. If the text was longer than the height of the box, it would be contained in the DIV, but a vertical scroll bar would appear beside the DIV and allow the content to be scrolled.

Simple enough, this is easily handled by the CSS variable overflow:auto; being put on the content DIV. However, what I found was that this caused a problem in Firefox, and judging by the number of forum postings in my Google search for a solution, a common problem at that.

What “should” happen is a vertical scroll bar will appear, but as the horizontal one isn’t needed, it should remain hidden, essentially creating a mini content window - if you will - on the page. Firefox, however, continuously rendered the DIV with the horizontal scroll bar also displayed (but with nothing to vertically scroll to).

As I said, I did a quick Google search for the solution, and as is my relationship with Google, when it wasn’t on the first page - I took another crack at it myself.

The solution, as is so often the case, was remarkably straight forward. Simply nest another DIV around the content (but in the ID=”content” DIV) and set its width to a smaller width than the content DIV (say… 98%, gives a nice little padding as well).

Here’s the markup:

And the CSS: