IE6 float margins fixed!

Ever notice the weird difference in margins between IE6 and the rest of the browsers when using floats? IE6 seems to like to add an extra pixel more than specified in margins. The following will show you an easy way to fix this problem.

The following two floated divs should appear on the same line in all browsers other than IE6.

One way to fix this is to include another stylesheet for IE6 using the IE6 conditional or the *html hack with a margin declaration of 1px less than specified for the floated element. This way can be a little to bothersome however.

There is an even simpler way to fix this. Simply add:

display:inline

to the floated element. That’s it!

Here are the same two divs, but this time, with display:inline.