This seems to be a IE6 (6.0.2600.0000) bug with the left horizontal margin. It seems to add an extra 20px to the left double the horizontal margin to the elements which are floated.

The only known fixes 1) don't use horizontal margins on floated divs. This is slightly more viable an option than it sounds as this bug only effects horizontal margins, but not padding or borders. (however, if you can't use either of those, and in many cases you can't, you're SOL) or 2) use browser sniffing to inline the proper style corrections (so much for write once code). I'm currently using the latter method.

I haven't seen any IE6PC parsing bugs floating around, so that's not an option.

This appears to be a previously undocumented bug, unrelated to Owen's box exceptions or Raphael's bgcolor float bug. I've submitted this to RichInStyle, but honestly, I'm not sure what the central 'browser bug' repository is. If you know anything more, please clue me in.

---

2/11 - Confirmed by ecd and Porter on css-d.

2/12 - riffola points out that this error remains in the latest beta of IE6SP1.

2/13 - Owen sent me an email. Apparently this bug is a holdover from IE5/5.5PC. I've tested on IE5.5 and it does appear to be the same bug. Again, this bug doesn't seem to be documented. As there doesn't seem to be any central css bug/solution database on the web, I'll probably throw up a wiki or issue tracking db soon.

---

body {
  background-image: url(pxbg.gif);
  margin:0;
  padding:0;
  border:0;
}

p {
 background-color:black;
 border:1px solid #ccc;
 padding:10px;
 margin:20px;
 color:white;
}

#test {
  float:left;
  padding:10px;
  margin-left:20px;
  border:1px  solid  #ccc;
  position:relative;
  width:300px;
  background-color:red;
  color:white;  
  clear:both;
}  
    

#test2 {
  float:left;
  padding:10px;
  margin:20px;
  border:1px  solid  #ccc;
  position:relative;
  width:300px;
  background-color:red;
  color:white;  
  clear:both;
}
    

#test4 {
  float:left;
  padding:10px;
  margin:40px;
  border:1px  solid  #ccc;
  position:relative;
  width:300px;
  background-color:red;
  color:white;  
  clear:both;
}
    

#test3 {
  float:left;
  padding:10px;
  margin:0;
  border:1px  solid  #ccc;
  position:relative;
  width:300px;
  background-color:red;
  color:white;  
  clear:both;
}