CSS Floats: Rule 3

The right outer edge of a left–floating element may not be to the right of the left outer edge of any right–floating element to its right. The left outer edge of a right–floating element may not be to the left of the right outer edge of any left–floating element to its left.

This rule ensures that no overlap occurs between left–floating and right–floating items whose additive widths exceed their parent block. Consider the <div> elements above. Both are 500 × 200 pixels in dimenions, and their parent, <div id="content">, viewable in the source of this file, is 900 pixels wide. Together, these elements' widths add up to 1000 pixels wide, 100 pixels more than the containing 900 pixels. As such, the second element floats underneath the first, and not over it. This behavior is what the current rule describes.

Click the “overlap” button above to see exactly what behavior this rule prevents.