block formatting contexts
A block formatting context is a box that satisfies at least one of the following:
- the value of “float” is not “none”,
- the used value of “overflow” is not “visible”,
- the value of “display” is “table-cell”, “table-caption”, or “inline-block”,
- the value of “position” is neither “static” nor “relative”.
The left margin is not large enough to move the pink box away from the yellow box. That margin would have to be greater than the margin box of the two floats (#aqua and #yellow).
Webkit (Chrome and Safari) seems to "create" a right margin that is equal to the left margin value.
Space between floats and non floated boxes should be created via margin on the floats.
Style the pink box with:
border-left: 20px solid #fff;