Simple float with negative margins causes overlap

[markwm]

I'm trying to understand why floating 2 divs which have a negative margin value equal to or greater than the height of the divs themselves causes an overlap. Here's my CSS.

#one {
background-color: green;
width: 200px;
height: 10px;
float: left;
margin-top: -10px;
}
#two {
background-color: red;
width: 200px;
height: 10px;
float: left;
margin-top: -10px;
}

And my XHTML

 
<div id="one"></div>
<div id="two"></div>

instead of sitting side by side, they occupy the exact same space. Yet if I change the margin value on div#one to -9px, they DO sit side by side. Albeit, not quite adjacent given the 1px difference is margin.

Can anyone explain what is going on here?

[cmarshall]

Wow. You're right. It looks like a bug, but it might not be. SuzyUK (the resident CSS oracle) may have some enlightenment on this.

Negative margins get a bit weird.