The CSS float property is invaluable in creating liquid and creative layouts. In the past, people have relied on tables to give them a page layout structure. With the float property you can create much more flexible layouts.

Floats are commonly used on images to float them to the left or right of text, allowing the text to wrap freely around the image.

By floating the first division to the left, this second one is able to float next to the first one. Once the available space on the page has been filled (if you have set a width to your page) a further floated element will wrap down.

To create a more common look for our two columns, we apply a margin to the left of the second division, giving us a gutter in the middle.