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 aqua box is taller than the yellow box so it "catches" the text that flows around the floats.
The rectangular area that contains the boxes that form a line is called a line box.
Style the pink box with
text-indent:97% (check in IE6 and 7 too).