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.

• September 16, 2003
• Comments closed
• Posted in CSS

• Previous post: SimpleQuiz
• Next post: Image Replacement for IE5/Mac

Information, sponsorship, and externals

Best of 456 Berea Street

Equal height boxes with CSS (view demo) and Equal height boxes with CSS, part II (view demo)

It’s easy to create equal height columns with CSS. It just doesn’t work in IE.

Styling form controls and Styling even more form controls

Trying to make form controls appear identical across browsers and platforms is futile.

The alt and title attributes

Guidelines on how and when to use the alt and title attributes.

Basics of search engine optimisation

Make search engines love your site by following these basic guidelines for SEO.

Reveal your old school web development hacks

A collection of old school web design and development hacks.

More popular articles

Random places to go

• meyerweb.com
• Adactio: Journal
• Jens Meiert
• Le «blog personnel» de Joe Clark
• Box of chocolates
• Beast-Blog.com
• Veerle’s blog
• Lillbra
• Wait till I come!
• Bruce Lawson's personal site