Advanced CSS Tutorial 3: Float

With float an element can be pushed to the left or right allowing other elements to wrap around it.
Float is most commonly used for images but is useful for other things too.

How Elements Float
Elements may only be floated horizontally, not vertically.
A floated element will move as far on its horizontal axis as it can. This means all the way to the left or right of its containing element.
The elements after the floating element will flow around it; elements before the floating element will not be affected.
If an image is floated to the right, a following text flows around it, to the left:
img
{
float:right;
}

Floating Images Next to Each Other
If you place several floating elements after each other, they will float next to each other if there is room.
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}

Turning off Float - Clear
Elements after the floating element will flow around it. To avoid this, use the clear property.
The clear property specifies which sides of an element other floating elements are not allowed.
.text_line
{
clear:both;
}