Floating bugs

No, I’m not talking about dead insects floating on water here. I’m talking about an incredibly frustrating bug in IE/Win. I encountered this nasty bug when I wanted to change the source order of this site so that the main content comes before the navigation and sidebar.

I had no problems at all at first. Move some things around in the code, float the sidebar right, add a left margin to make it clear the main column. Piece of cake. It even looked fine in IE5/Mac. Then I went to check in IE6/Win. No sidebar. I scrolled down a bit, and there it was, sitting below the main column. A popped float.

I started checking my widths, borders, paddings and margins to see if I had made a mistake somewhere when I calculated the left margin I needed to give the sidebar. Nope, it all added up.

Close to pulling my hair out, I made a bare bones test case with only a wrapper div with two divs inside. Still the same problem. By now I was ready to give it up. I more or less randomly started changing the width and margin values to see if I could somehow get the float to pop back up to where it was supposed to be.

And that’s when I found the bug. IE/Win gives a left floated block a right margin of 3px. No matter what you do, the margin is still there. Since my layout has a fixed width and doesn’t allow for that, the sidebar was pushed down below the left column.

OK, so now at least I knew what was going on. Looking for a workaround, I tried floating the sidebar to the right and removing its left margin. And it worked.

To see this in action, check the floating bug first and then the double float fix. Obviously you’ll need to use IE/Win to see the difference. In all the other browsers I tried, the two pages look identical.

Depending on what the rest of your page looks like, you may need to add a clearing element after the floats to push any footer or similar content past the end of the floats.

After finding this bug and workaround I went to see if other people had stumbled upon this and found any better workarounds. I found this description of The IE Three Pixel Text-Jog at Position Is Everything, which seems to be the same bug expressing itself in a slightly different way. Coincidentally, the very same page was mentioned yesterday by Michael Landis on the css-discuss mailing list.

Posted on September 16, 2003 in CSS