CSS: Using floats to layout content

With people feeling they need to move away from 'old' practices such as using TABLEs for layout, and towards more 'semantic' markup, the use of CSS properties such as float and clear is increasing. But it's clear that many webmasters have little or no idea on how they actually work or the variety of ways in which they can be used.

This article focuses on the layout of content within a page, but the same rules can be applied for layout of the website itself. We start with the simplest case and work towards the more complicated.
1. Wrapping text around floated content
spacer.gif
This image and text are contained in a DIV that has been floated to the left and assigned a width of 200 pixels. You must assign a width to floated content.

This text is in a normal paragraph following the floated DIV. The border of the paragraph can be seen as a light blue box. Note that this outline extends behind the green box of the floated DIV. This is important as it means that the left hand side of the paragraph is actually at the left hand side of the page. Just the content of the paragraph has been shifted to the right in order to 'get around' the floated DIV. This has implications if you're trying to manipulate the margin or padding on the side of the paragraph adjacent to the float.
spacer.gif
This image and text are contained in a DIV that has been floated to the right.

Now we add a second paragraph and flesh it out with content. You should see that, once the height of the DIV has been covered, this paragraph text will wrap around it so that the text is no longer indented. A similar effect can be achieved in HTML by setting the align attribute of an IMG or TABLE element to left.

One complication of floats is that Internet Explorer will add a a few pixels of padding between the floated DIV and the text that follows. This has no place in the standards and is simply their way of 'dumbing down' CSS and HTML. In other browsers the paragraph text will butt up against the floated DIV. If you want padding in all browsers you need to assign a margin to the floated element.
2. Using 'clear' to force content past a float

A common mistake when using float to layout content is to forget to add a clear. This is an instruction to an element following floated content that it should move down far enough that it's not going to be affected by preceding floated content.

This problem occurs when the 'normal' content following a float is not long enough to clear it. In that case you might the heading of a subsequent section being effected, or even content overflowing the 'content' section of your page. This is because floated content is 'taken out of the document flow' so won't force any containing boxes to expand down the page.

This form lets you modify the clear style for each of the three paragraphs in the preceding section so you can see the effect it has on layout.
Element: Clear:

When there are no other elements present the best way to force a container to expand around floated content is to insert an empty div with clear set to 'both' as shown here:

<-- -->

For more details on floating content and clearing floated content see the link to the W3C visual formatting model under References below.
3. Using floats to break content into columns
This is the first column

A slightly less common, but very powerful use for floats is to group content into columns. This can be done by floating a DIV to the left to form the left hand side column, then adding a second DIV, alse floated to the left to sit beside it. Each DIV must have a width and you can add a right-margin to the first DIV to separate the columns.

In many cases this makes the use of TABLE elements unnecessary.
This is the second column

spacer.gif

You can see that the content in this box sits adjacent to the first paragraph and, unlike our first example, doesn't wrap around once the height of the first float has been cleared.

With this kind of layout you must remember to add a clear after the last DIV, otherwise subsequent content can appear in and around the two columns.

You're also not limited to just two columns and can quite easily have three or four across the page. There are also other options. For a three-column layout you could float DIVs to the left and right and have 'normal' content appearing in between - like the section in our first example where text appears between the two green boxes.
1st column is floated: and the 2nd column is floated:

Note: for anyone looking at the code behind this form, be aware that the standard 'scriptable' property for setting the float direction is cssFloat instead of float which has other uses in JavaScript and is a reserved word. Internet Explorer instead uses styleFloat.
4. Using floats to 'tile' images and text

Now we come to something that should be simple but in fact is very complicated. If you have a lot of small DIV's - photos in a photo gallery for example - you can create a simple page by simply floating them all to one side.

This works perfectly when the items to be floated all have the same height:
spacer.gif spacer.gif spacer.gif spacer.gif spacer.gif spacer.gif spacer.gif spacer.gif spacer.gif spacer.gif spacer.gif spacer.gif

but fails miserably when the height varies as 'taller' items prevent those that follow from floating all the way to the left hand side:

Note: reload this page to see a different configuration.
spacer.gif spacer.gif spacer.gif spacer.gif spacer.gif spacer.gif spacer.gif spacer.gif spacer.gif spacer.gif spacer.gif spacer.gif

If this is the case then the safest option is to refert to using a TABLE for layout. In some cases you could avoid that by inserting a clear="left" to every nth element, but that can become difficult to maintain when items are added or removed.