Apr 5, 2010

CSS Floats

What are floats?

This box is floated right.

A float is simply a box (for example, a div) that is shifted to the left side or the right side of its container. We then say that the box is floated left or floated right.

One of the key benefits of floats is that they allow you to have bits of content sitting side by side, rather than one below the other (much like you can do with table columns, but better!). This allows you to do cool stuff like text columns, boxouts (like the one above), and advanced positioning of your page elements.

Floats are a bit like the align="left" and align="right" attributes in img elements.

The float property

Creating a floated element in CSS is very easy. We just use the float property - for example:

<p> This is our regular, non-floated column of text. This is our regular, non-floated column of text. This is our regular, non-floated column of text. This is our regular, non-floated column of text. This is our regular, non-floated column of text. This is our regular, non-floated column of text. This is our regular, non-floated column of text.</p>

This is what it looks like:

This is our left-floated text box.

This is our regular, non-floated column of text.This is our regular, non-floated column of text.This is our regular, non-floated column of text.This is our regular, non-floated column of text.This is our regular, non-floated column of text.This is our regular, non-floated column of text.This is our regular, non-floated column of text.

A right-floated boxout

This is similar to the last example, but this time the box is floated right rather than left.

<p> This is our regular, non-floated column of text. This is our regular, non-floated column of text. This is our regular, non-floated column of text. This is our regular, non-floated column of text. This is our regular, non-floated column of text. This is our regular, non-floated column of text. This is our regular, non-floated column of text.

</p>

This is what it looks like:

This is our right-floated text box.

This is our regular, non-floated column of text.This is our regular, non-floated column of text.This is our regular, non-floated column of text.This is our regular, non-floated column of text.This is our regular, non-floated column of text.This is our regular, non-floated column of text.This is our regular, non-floated column of text.

Two columns of text

In this example, we use two floats side-by-side to create two columns of text. We use two left-floated divs to do this (not a left float and a right float as you might expect). The second floated div sits to the right of the first floated div.

<div style="float: left; width: 200px; margin-right: 5px;">

<p> This is our left text column. This is our left text column. This is our left text column. </p></div>

<div style="float: left; width: 200px; margin-right: 5px;"> <p> This is our right text column. This is our right text column. This is our right text column. This is our right text column. This is our right text column. </p>

</div>

<div style="clear: both;"> </div>

This is what it looks like:

This is our left text column.This is our left text column.This is our left text column.

This is our right text column.This is our right text column.This is our right text column.This is our right text column.This is our right text column.

The clear property

You're probably wondering what this is for:

<div style="clear: both;"> </div>

The clear property is a way of saying "make sure this element does not run alongside a previous float". By putting a div with clear: both after our floated columns, we're saying "don't run this div, or anything after it, alongside our floated columns".

Without having an element with clear: both after our floated columns, all later content on the page would attempt to flow alongside the columns. (Try it yourself and see what happens!) You could say that we're telling the browser, "the floats end here".

Possible values for the clear property are: left (don't run alongside any left-floated boxes), right (don't run alongside any right-floated boxes), both (don't run alongside any left- or right-floated boxes), and none (do nothing). When in doubt, use both.

Rules to remember

If you want to have a right-floated box, you need to put the HTML for the floated box before the non-floated content (not after as you might expect).

You must specify a width for all floated elements (though the width can be relative, such as a percentage width).

If you need to have content after a float that shouldn't run alongside the float, use the clear property.

Go forth and float!

Now that you understand how floats work, try making a few floated boxes yourself, remembering the above rules. Floats are a key part of building CSS-positioning websites, so they're well worth getting the hang of. You might also like to refer to the official specification of the 'float' property.