Webmaster Forum / HTML, CSS, Scripts / CSS / February 2008

Hi there,

Internet Explorer (6 and 7) confounds me with inconsistent scrollbar
behaviour.

I use three DIVs for creating a three row layout. The second DIV has
overflow set to auto. Failing to get a fluid layout only applying CSS, I
use Javascript to adapt the second DIV's height so that all three DIVs
fit in the browser window. Usually scrollbars appear on the second DIV.
However, if the user increases the browser window width (until content
fits) the x-scrollbar is unnecessary and thus should disappear. Instead,
depending on the browser window width at the time the document was
loaded the x-scrollbar stays.

I think it's best explained using an example. So please see this
stripped down version of the original page where I first encountered the
problem:

  http://14mb.de/u/dkabs/testcase_ie_resize.html

The page contains three divs: header, content (yellow background), and
footer DIV (and an advert, but I did not place it). The Javascript code
has been replaced by a form button that sets height of content DIV to
200px. The form buttons also simulates a fixed width content in order to
force a horizontal scrollbar to appear if the browser window is made
small enough.

Try this:
- load page in a small browser window
- press button on page -> x- and y-scrollbars on content DIV appear
- increase browser window width [*]-> x-scrollbar stays (unexpected)
- reload page (this time the browser window is wide)
- press button on page -> y-scrollbar, but no x-scrollbar
- shrink page width -> x-scrollbar appears (as expected)
- expand page width -> x-scrollbar disappears (as expected)

[*]Strangely enough, if the browser window is maximized using "Maximize"
window button, the x-scrollbar duly disappears.

How can I work around this problem? I want to get rid of the x-scrollbar
if it is not necessary and still keep the layout fluid. How can I do this?

Cheers
Daniel