3.2 IE Double Margin Float Bug

Double Margin Float Bug

This bug is exclusive to Internet Explorer and first reared its ugly head in IE5, when CSS started to become popular, and then persisted through IE6 (but fixed by IE7). When a floated element is given a margin in the same direction as the float (left or right), the margin doubles in size.

For example, floating a container div to the left and giving it a 200px left margin like in the CSS below, in IE5 & 6 the margin would double and become 400px. This behaviour can seriously affect page layout, especially when floats and margins are used to position container divs such as columns, which of course they very often are.

#col	{float: left;
	width: 600px;
	margin-left: 200px;}

Fixes

Luckily the fix is very simple (but not at all obvious). Adding display: inline to the floated element fixes the bug, somehow. So the code becomes:

#leftcol	{display: inline;
		float: left;
		width: 600px;
		margin-left: 200px;}

Why this fixes the bug is unknown. Floats are block-level elements and can't become inline elements, so adding display:inline has no adverse affects on the element but somehow fixes the margin problem.