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