CSS overflow vertical toolbar problem

overflow.jpgI 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 thoughts on CSS overflow vertical toolbar problem

  1. What is good for FF is not good for IE.
    What is good for IE is not good for FF.

    It’s amazing that browsers cannot meet the W3C specs in the same way. I’ve hit similar problems with divs and trying to support both FF and IE. Watch out for images that are wider than the div. In FF it works fine. In IE things go crazy.

  2. Couldn’t agree more re: the head-scratcher of why some browsers still don’t conform to the W3C specs.

    Good point re: images. I was only using text, and didn’t test for what happens when large images are brought into the mix.

Say something...

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Return to Top ▲Return to Top ▲