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 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).

Try These

Watch This

aqua
yellow
pink
pink
pink
pink
pink

Check This

<div id="aqua">aqua</div> <div id="yellow">yellow</div> <div id="pink">pink<br>pink<br>pink<br>pink<br>pink</div>

Edit This

Use shift + enter to create new lines (even in Safari and Chrome).