Absolute positioning pitfalls
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.
Browse by tags:
Share this article:
Subscribe to this site for regular updates
3 responses to Absolute positioning pitfalls. Add your own.
well thank you, you stated an already identified problem i am facing, however you failed to elaborate on how i can go about positioning elements without using “absolute.” Basically, what I need to do is, position an element in relation to another element so it always stays in line, even in different resolutions, etc. (the two elements also have different z-index level–i’m not sure if that poses a concern). I’m getting a real headache trying to figure this out, and have not found any useful forums yet. Hopefully you can help. Perhaps I can send the .htm file if you need more specific reference.
Thank you
Hi Nima,
As mentioned, this article isn’t really concerned with when to use, or what to use instead of absolute positioning, but rather is just a heads-up as to some of the problems that can occur.
As for not finding useful forums, there are dozens out there providing useful tips and information on CSS and other web development matters, but the two I’d recommend would be CSS Creator and Sitepoint.
Thank you for the article - just what I needed to point my clients to on a training session when they don’t understand “why” they can’t use AP all the time, when exporting from ImageReady / Illustrator etc. Well written and a good resource for me as a trainer