
It’s an Internet Explorer-exclusive bug wherein an element that is floated – and given a margin in the same direction as the float – ends up with twice the specified margin size. The fix is extremely simple. All you have to do is apply a display: inline rule to your floated element. So you simply go from something like this:
#content {
float: left;
width: 500px;
padding: 10px 15px;
margin-left: 20px;
}
To something like this:
#content {
float: left;
width: 500px;
padding: 10px 15px;
margin-left: 20px;
display: inline;
}
For more about the double margin bug, check out http://www.cssnewbie.com/double-margin-float-bug
Tags: bug fix