Absolute positioning pitfalls

By John Faulds

This article first appeared on CSS Creator Forum and was written in response to the common requests for help from people new to CSS who were encountering problems whilst trying to use absolute positioning to create layouts (seemingly as a result of using Dreamweaver in 'design view' mode).

Although the article's title, and what is to follow, may give the impression that absolute positioning is something to be avoided at all costs, that is not the intention. Rather, I want to give a bit of a heads-up to CSS newcomers about the potential problems of using absolute positioning for layout without fully understanding the nature of the Visual Formatting Model, and will in fact provide some examples of when you would want to use absolute positioning.

The appeal of absolute positioning for CSS newcomers (apart from the fact that it's the code automatically generated by Dreamweaver when users are designing in design view mode) is that layouts can be put together quite quickly: by using values for top, right, bottom and left, you can get everything exactly where you want it.

The catch is that your layout will look great on your screen, at your window size and the text size you've chosen (not to mention operating system), but as soon as someone else views your layout with any of those variables different from yours, things start to go wrong.

To illustrate, here's a quick example: absolutely positioned layout designed for a screen resolution of 1024 x 780.

Every element on the page is positioned using position: absolute. Widths and heights are all in percentages to create a fluid layout while values for top, right etc. are all in pixels to get things exactly where I want them. So far, so good.

Now let's take a look at the same layout viewed at 800 x 600.

And finally an example with the user having resized the text in their browser.

(Please note that if you're looking at the source of each of the example pages that the values don't reflect what you'd use in a real situation as the examples have all been reduced in size to avoid opening huge pop-ups.)

As you can see, things are moving around and overlapping where they shouldn't. You'll get a better idea of the differences if you view the examples in more than one browser (IE in particular).

This is because absolutely positioned elements are taken out of the normal flow of the document and have no impact on later siblings (elements that appear after them in the source but within the same container).

Which means that absolutely positioned elements have no awareness of what's happening around them. When a page changes size, the elements don't move in relation to each other but rather in relation to their container and the values you've set for top, left etc.

And in most cases in which CSS newcomers use absolutely positioning to place layout elements, the container in which these elements are placed is the body itself, so when the body resizes, you get the above problems.

So, OK, if that's the case, what do you do instead and why would you use absolutely positioning at all?

To answer the first: it's going to vary on a case by case basis but, in general, when creating a layout, you should try and work as much with the normal flow of the document as possible. Let the elements themselves help position those that come after them.

In some cases though, you will want to use floats. Floats are also taken out of the normal flow of the document but content will flow around the outside of a float, which is not the case with absolutely positioned elements. Floats can also be cleared to have content appear below the area of the float. These two factors make floats more flexible as a layout device than absolutely positioning.

I won't go into any more on the subject of floats for layout here because it is a well covered topic. CSS-Discuss has a very good collection of articles/tutorials relating to two-column and three-column layouts.So, when do you use absolute positioning? Well that's the subject of another article: Absolute positioning practical examples.