Floating Elements

An element can be floated to the right or to left by using the property float.

For an example, if you would like to have a text wrapping around a image,

#picture {
float: left;
width: 100px;
}

Columns

Floats can also be used for columns in a document. To create the columns, you simply have to structure the desired columns in the HTML code with <div>:

<div id="column1">
 <p>This area has been fixed for the contents of column 1</p>
</div>
<div id="column2">
 <p>This area has been fixed for the contents of column 2</p>
</div>
<div id="column3">
 <p>This area has been fixed for the contents of column 3</p>
</div>

Now, the desired width of the columns is set, and then you simply float each column to the left.

#column1 {
float: left;
width: 33%;
}
#column2 {
float: left;
width: 33%;
}
#column3 {
float: left;
width: 33%;
}