Internet Explorer CSS Issue: Float Element Margin Doubled

entry.

Internet Explorer CSS Issue: Float Element Margin Doubled

Issue

This is, without a doubt, the most notorious IE6 bug that has baffled all CSS developers. Also known as the "Doubled Float-Margin" bug, this issue is about the margin properties of a floating element is doubled in IE6 and IE5 (IE7 has no such issue). For example:

.float-left-element {
	width: 100px;
	height: 100px;
	float: left;
	clear: left;
	margin: 0 0 0 10px;
}

The style class above will make a 100x100 pixel block element float to the left with left margin of 10 pixels. However, in IE6 and 5, the left margin will appear as 20 pixels (doubled the original) instead.

Internet Explorer (IE) has been well known as the most W3C incompatible browser. In particular Internet Explorer 6 (IE6), is far most the worst of its kind. Most web development jobs involving front-end design, will spend most of their debugging time on issues relating to IE6 and other IE. For a complete list of issues, see Internet Explorer CSS Issues & Solutions.

Solution

Method 1: Display Inline

Note the definition of the float property:

The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the 'clear' property). The 'display' is ignored, unless it has the value 'none'.

It is because of the fact that display is ignored, and IE6 also has another weird bug that causes the first line of an inline element to be margined, a beautiful solution was created to fix the bug - add display: inline. This will correct IE6 and 5 but does not affect all other browsers that follow standards.

.float-left-element {
	width: 100px;
	height: 100px;
	float: left;
	clear: left;
	margin: 0 0 0 100px;
	display: inline;
}

This is an important fix for cross-browser CSS development that all should remember.

Method 2: Wrapper

An old solution is to wrap the existing element with a floating wrapper. The wrapper will float and contain the element that wishes to have margins.
The HTML will be:

<div class="float-left-container">
<div class="float-left-element">
	... content ...</div>
</div>

This CSS will be:

.float-left-container {
	width: 110px; /* inner element width + margin */
	height: 100px;
	float: left;
	clear: left;
}
 
.float-left-element {
	width: 100px;
	height: 100px;
	margin: 0 0 0 10px;
}