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.
Wrapping text around floated content
Using 'clear' to force content past a float
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.
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 see 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.
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:
<div style="clear: both;"></div>
For more details on floating content and clearing floated content see the link to the W3C visual formatting model under References below.
Using floats to break content into columns
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.
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:
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.
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.