Why Does My Floated Left Div Go To The Next Line In IE6 Using The 960.gs?

I'm using the 960 grid system to make a site (www.960.gs). I have a 9 column wide div (grid_9) with two divs inside it (grid_5 and grid_4). This is meant to yield one large outer d

Solution 1:

Without being able to see more of what's going on, I'd guess the content of your internal divs is pushing their width to be larger than their container. IE6 doesn't respect a container's width designation if the content pushes that width at all.

But do post more code or a link if you can!

Solution 2:

The line:

"and the same setup works fine in other parts of the site."

Would lead me to look at the padding, margins and width of the content within the grid_4 and grid_5 divs, from what I remember the box model is pretty flaky in IE6.

Also IE6 (and possibly later) has a problem in that italic content is always wider than you expect and could lead to the outer div (grid_4 or grid_5) being wider than you expect.

Solution 3:

Could be something as simple as IE6's propensity to double-pad. If you dare present the 960 grid system with a hack, try this:

padding: 10px; /* whatever the padding is supposed to be for normal browsers */
_padding: 5px; /* half of that for IE6 */

IE6 will render the _padding rule - other browsers will not. This works for any rule: normal style rule, first; IE6 _rule, after.