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 is as tall as its content. The text flows around the floats.

Do not ever use <br> as I use them here. You should avoid using this element unless it is in a form or a address elements.

Style the pink box with text-indent: -50px; (make sure to check in IE 7).

Try These

Watch This


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