IE6 3 Pixel Float Bug

So I ran across a nasty bug the other day in Internet Explorer 6 that I had never seen before. The bug is when you have 2 adjacent elements and one of them is floated, IE6 adds a 3 pixel margin to the floated element. You can read about it here on Position is Everything.

I ran a pretty thorough test on it to make sure that is what is occurring. I also tested every fix I could think of before coming up with one. The fix I came up with is to float the other element. This causes the 3 pixel margin to disappear. It doesn’t matter if you float it left or right, either works. Nothing else did.

Click on the following links for examples and source code of the bug and the fix. I realize that the float fix may not be ideal for all situations. It depends on how your site is laid out. That being said, it does work, although it may require you to redesign your site a little bit to apply this fix. It all depends on how bad you want it to work correctly in IE6.