IE7 Not Playing Nice with My Floating Sidebar

Question

I'm trying to get a dynamically sized sidebar to float in the upper right portion of my web pages (but below the header and nav) and have the main content on the page flow around it (sort of in an "L" shape except with the bottom part of the "L" really thick). The width and height of the sidebar will vary from page to page so I can't use any hard values.

My css looks like:

main {

width: 850px;
height: auto;

}

sidebar {

width: auto;
float: right;

}

(plus some padding, margin, and background color code I think is inconsequential)

My html looks like:

<div id="wrapper">  
    <div id="header">    /* header stuff */    </div>  
    <div id="nav">       /* nav stuff */       </div>  

    <div id="sidebar">  
        /* my sidebar content, really just an h3 and a ul */
    </div>

    <div id="main">
        /* lots of content here */
    </div>
</div>

I don't completely understand why I have to have the sidebar div first, but it this code works fine in FF, Chrome, Safari (Windows), and IE8. But on IE7 (and IE6, which I don't care about), the main content gets pushed down below the bottom of the sidebar, as if there was a "clear: left" on the sidebar div (but there isn't).

I have a feeling this is one of those evil IE7 non-compliance bugs, especially because IE8 behaves exactly like the other browsers. But I have no idea how to fix it.

Any ideas? TIA.

Answer 1

From what you describe, it sounds like your sidebar is behaving as if it was a block element. Maybe try some different display options like inline-block. I'd also try experimenting with the width min-width attributes. Hard to say though.

Answer 2

First, make sure you are using a doctype that will put IE7 into strict mode (see http://hsivonen.iki.fi/doctype/ for an explaination). if that doesn't do it, it may be that you need some play in your margin widths.

The reason why you have to have the sidebar div first, is since div is a displayed as a block element anything after it, will be below it (unless you float the main div).

By floating the sidebar div and putting it first, the browser knows it can display the main div to the right of the sidebar. You could get a similar effect by adding float left to the main div and removing the float from the sidebar div and moving it after the main div.

Answer 3

Bingo! Fixed! The guys who mentioned playing around with widths and margins get the gold stars tonight. It turned out that all I had to do was remove the fixed width on the main div, then add some padding on the right to create a gutter for text and images. Tested and confirmed in FF3, Chrome, Safari (Win), and most importantly, IE6 & IE7 (even though I still hate IE).

I guess the IE rendering engine was saying, "I see that you want your main div to be 850px wide, but with that sidebar you stuck up there, I don't have room so I'll have to shove it underneath the sidebar". Of course, every other browser's rendering engine said, "Dude, I totally get what you're trying to do! No problem, I'll lay out everything exactly as you'd like it."