CSS: Using floats to layout content

 Tweet0 Shares0 Tweets1 Comments

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

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.

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.

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:

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.

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.

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.

References

• W3C: Visual formatting model: floats

< CSS

User Comments