float
This property specifies whether a box should float to the left, right, or not at all. It may be set for any element, but only applies to elements that generate boxes that are not absolutely positioned. Since floats are not in the flow, block boxes created before and after the float flow vertically as if the float did not exist. However, line boxes created next to the float are shortened to make room for the margin box of the float.
The pink box’s margin box touches the left edge of the containing block (same as the aqua box). To create a gap between the yellow and pink boxes the margin value would need to be greater than the margin box of the two floats.
If the last box was a block formatting context (without being a float itself), there would be a three pixel gap between #yellow and #pink in IE 6 (see three pixel text-jog bug).
Style the pink box with:
border-left: 10px solid #0f0;Style the pink box with:
border: 10px solid #0f0;