IE (Internet Explorer) margin doubling bug fixes
27th September 2006
In Internet Explorer for Windows (tested with version 6 SP2), if you write CSS code similar to this:
- #floatbox
- {
- float: left;
- width: 150px;
- height: 150px;
- margin-left: 100px;
- }
and put your “floatbox” inside a container (such as DIV), you will actually see 200px of the left margin instead of the expected 100px. This problem is known as “IE margin-doubling bug”.
In this post I collected solutions you can use to avoid this problem. The solution I’d recommend is at the end.
The first solution is to apply some minimal height to the container:
- * html .visualIEFloatFix { height: 0.01%; }
This method is described in more details here , and even better here.
Another one is to apply position:relative, this is quite an old solution, described here (there are also other fixes for the problem there, too; link returned error at the time of writing, might be a temporal problem – if not, please remind me to remove it).
Another solution is to wrap the element in another one, and apply float to that another. Removing float from the element helps avoid the trouble. This fix found here. There are lots of examples there, too.
You can also set display:inline, as described in this solution. I would recommend using this one as the most clean and compatible. To apply it to our example at the beginning, we should write the following CSS code:
- .floatbox
- {
- float: left;
- width: 150px;
- height: 150px;
- margin-left: 100px;
- display: inline;
- }
January 20th, 2009 at 20:21
display: inline; solution doesn’t work with 6ie
January 21st, 2009 at 1:14
Mariya,
it should work, if you really mean IE6 (there was no IE7 at the time this solution was suggested).
Check your code, you might have something else influencing the display.