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%;
}