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: