What is happening here illustrates the relationship between collapsing margins and floats.
Take a look at this HTML snippet:
<div class="wrap">
<div class="right">
<p>right</p>
</div>
<div class="left">
<p>left</p>
</div>
</div>
This code resembles your setup but includes a wrapper element.
Now, examine the CSS rules:
.wrap {
outline: 2px dotted red;
padding: 1px;
}
p {
outline: 1px dotted blue;
margin: 2.00em 0;
}
.left {
background-color: yellow;
}
.right {
float: right;
background-color: lightgray;
width: 150px;
}
I introduced the .wrap class with 1px padding to highlight the margin effects clearly.
Here's the demonstration link for better understanding: http://jsfiddle.net/audetwebdesign/9hhkk/
The content is displayed with both texts aligned on the same baseline, and the right text floated to the right as intended. Both left and right elements share identical margins.
In your case, the top margin of the .left collapsed with its container's top margin. However, since the .right element is floated, its margins do not collapse, resulting in additional padding space.
I configured my example so that margins stay separate for in-flow elements.