HTML and CSS Reference
In-Depth Information
Doubled Float-Margin Bug
The first of these creepy crawlies is one you've probably encountered if you've ever used floats to
position, well, almost anything. If you apply a margin to the same side of an element as its
floated direction (e.g.,
margin-right
on a box assigned
float:right
), and that margin comes in
direct contact with the side of the float's container element, IE 6 will take it upon itself to double
that margin's declared width (and the bug only occurs on the first floated element in a row).
Let's take the following example:
Markup
<div id="float">
<p>floated div</p>
</div>
<div class="clear"><!-- clears the float above --></div>
Styles
#float {
float:left;
margin-left:100px;
width:200px;
height:150px;
background:#ddd;
text-align:center;
}
.clear {
clear:both;
}
The empty clearing
div
has been included for clarity, though the same effect would be
achieved by using the easy float clearing method from Chapter 6.
Although there should only be a
100px
left margin between the float and the left border
of the page (non-IE browsers get this right), IE 6 inexplicably doubles the margin to
200px
(Figure 14-9). This odd behavior could definitely make your life miserable for a while, but
thankfully there's a fix, and it's dead simple: declare
display:inline
on the floated box,
and the margin returns to normal. Why does this work? Who knows, really? With IE bugs,
sometimes just knowing how to solve it is enough (you can find an expanded write-up at
www.positioniseverything.net/explorer/doubled-margin.html
).
