Why does my floated left div go to the next line in IE6 using the 960.gs?

Question

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 div with 2 internal divs sitting side by side inside of it.

However when viewed in IE6 it displays as one larger div with two internal divs, one below the other.

In Firefox the divs sit next to each other, as they are meant to, and the same setup works fine in other parts of the site.

What is going on? I can't work it out.

Here is the html:

<div class="ContentWrapper grid_9 alpha omega">
        <div id="MainTitleWrapper" class="standardColor">
            <h2><span class="Rating"><%=Model.Rating%></span><%=Model.ScreenName%></h2>
        </div>
        <div class="MainContentWrapper standardColor">
            <div class="grid_5 alpha">
                    <h3>Ranked This Week In:</h3>
                    <div class="TagContentList">
                        <ul> some stuff</ul>
                    </div>
            </div>
            <div class="grid_4 omega">
                    <h3>Latest</h3>
                    <div class="tweet">
                    </div>
            </div>
     </div>
    </div>

Answer 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!

Answer 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.

Answer 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.