IE Float Margin Problem
IE comes with problems when we use float-margins. To be more explicitly, lets have an example. The image below show a simple div (the blue one) containing a left-floated div. The float has a left margin of “100px” witch will produce a distance between the left edge of the container box and the left edge of the float box.
Here is the CSS code:
.box {float: left;
width: 110px;
height: 100px;
margin:15px 0 15px 100px;
}
It seems to be OK, but in IE this code is interpreted in a different way. The problem is that the gap between the two divs is doubled, so we will have a distance of 200 pixels.
This bug only occurs when the float margin goes in the same direction as the float and is trapped directly between the float and the inside edge of the container box. Any similar margin won’t show the doubled margin.
Can we fix it?
All you have to do: simply put {display:inline;} line in the float div and our problem is fixed. This line should be ignored on a float, and indeed all browsers show no changes in the float when this is done, including IE. But, this does somehow trigger IE to stop doubling the float’s margin. Thus, this fix can be applied straight, without any complicated methods.
.box {float: left;width: 110px;
height: 100px;
margin:15px 0 15px 100px;
display:inline;
}
Post a comment
RSS/XML