float: right bug in IE - Part 1
"float: right" bug in IE : left margin is lost. IE6 bug with floating div and spacer.
css :
body {
margin: 0px;
}
#contener {
border: 1px solid #000;
margin: 10px 50px;
}
#floatRight {
float: right;
border: 1px solid red;
color: red;
width: 30%;
}
#contenu {
border: 1px solid blue;
color: blue;
}
.spacer {
clear: both;
border: 1px solid #FF00FF;
color: #FF00FF;
}
xhtml :
<div id="contener">
<b>#contener</b>
<div id="floatRight">
<b>#floatRight</b> : Float block at the right of the block #contenu
</div>
<div id="contenu">
<b>#contenu</b> : Simple block
</div>
<div class='spacer'>
<b>.spacer</b> : a "spacer" block...
</div>
</div>
Correct display :
Internet Explorer 6 display :

With IE6, the #contener's border loses the left margin !
CSS workaround :
body {
/* margin: 0px; SUPPR */
margin: 10px 50px; /* ADD */
}
#contener {
border: 1px solid #000;
/* margin: 10px 50px; SUPPR */
}
#floatRight {
float: right;
border: 1px solid red;
color: red;
width: 30%;
}
#contenu {
border: 1px solid blue;
color: blue;
}
.spacer {
clear: both;
border: 1px solid #FF00FF;
color: #FF00FF;
}
OK, now I want a background-color in #contener :