Issue with css float -- Hindering IE6 from putting div in next line

Question

Hi,

I've got an issue with floating divs in IE6.

There's one navigation div on the left and one content div for the rest of the page. They've got the following css values:

#navigation {
    float: left;
    width: 185px;
    padding-left: 5px;
    overflow: auto;
    height: 100%;
}

#content {
    overflow: auto;
    height: 100%;
}

In Firefox, IE8, Chrome and Opera, I get scrollbars for the content div when I resize the page to a size where both divs can't fit in as a whole. The navigation div stays in its place. And that is the desired behaviour.

But in IE6, there are no scrollbars for the content div. Instead, when the page is getting too small, IE6 simply puts the content div under the navigation div.

Do you know any way to hinder IE6 from this behaviour?

P. S.: I am using IETester to display the site in IE6 mode. I hope this program works properly.

Answer 1

Wrap both of them in an additional div with these style properties:

div.wraps {
    width: 100%;
    overflow: hidden;
}

Answer 2

I think this plugin will help: jQuery Masonry

Masonry is a layout plugin for jQuery. Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

Answer 3

I've written a browser sniffing function in JSP and now append additional code when the browser is an IE6.

I add the css property float:left to the content. And on window.resize I perform the following function to change the content's width:

contentWidth = (document.documentElement.clientWidth - 
document.getElementById("navigation").offsetWidth) + "px";

document.getElementById("content").style.width = contentWidth;