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

960.gscssgrid-layouthtml

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>

Best Solution

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!

Related Question