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>
[ See it in your browser ]

Correct display :

good display

Internet Explorer 6 display :

IE6 bug 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;
}
[ See it in your browser ]

OK, now I want a background-color in #contener :

Well surprise ! IE offer another "float: right" bug...