float: right bug in IE - Part 1

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 :