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:
[your actual content]
And the CSS:
#content {height:400px;overflow:auto;visibility:visible;}
#contentwrapper {width:98%;}
2