float: right bug in IE - Part 2

css :

body {
  margin: 10px 50px;
}
#contener {
  border: 1px solid #000;
  background-color: yellow;
}
#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 text and the block #contenu are invisible ! There take the color of the #contener's background-color !

CSS workaround :

body {
  margin: 10px 50px;
}
#contener {
  position: relative; /* ADD */
  border: 1px solid #000;
  background-color: yellow;
}
#floatRight {
  position: relative; /* ADD */
  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;
}

See also :

• float: right bug in IE - Part 1
• Bughouse
• MSIE6 bug with floating divs and spacers