Beware of absolute positioning!

A common problem for beginners - especially those who use Dreamweaver, it seems - is the over-use of absolute positioning.

It is important to understand the big difference between using the default 'static' positioning, together with relative positioning and floats, and using absolute positioning.

Documents flow.

With a regular text document - like a Word file - when you add more text or an image to one paragraph, section or page, everything below that moves down. Of course, you already know this. The point is that HTML pages should do the same.

Absolute positioning breaks the flow.

When you use absolute positioning on an element, you take that element out of the flow of the document. Let's say you do this for your header:

#header {
position:absolute;
top:10px;
left:10px;
height:80px;
width:770px;
}

Now, you've taken the header out of the flow of the document and your content will be sitting right at the top of the page. You won't be able to read your content, because your header will be covering it.

You may then think the answer is to do this with you content:

#content {
position:absolute;
top:100px;
left:10px;
width:770px;
}

This, of course, is not the answer. If you do that, you will have the same problem with your footer, but this time, the problem will be bigger, as if you want to change something in your content after that, you'll have to recalculate the absolute positioning of the footer. Imagine if you have to change the height of the header for some reason, then you'll have to change the position of the content and the footer. The fun never stops if you use absolute positioning with all the elements in your content too.

Use static and relative positioning with floats.

The default value for 'position' is static, and that works fine for the document flow. There are times when you do need to set the position of an element to 'relative', but the effect is very similar to static positioning. The tricky part - the reason many beginners find themselves with the absolute positioning problem - is columns. To make columns you use floats. My beginner's guide, layouts and clearing floats pages have more about this.

Just to clear things up.

A better way to do the code above (for the header and content) might be something like this (assuming that they are within another 'container' div that centres everything on the page):

#header {
margin:10px;
height:80px;
}
#content {
margin:10px;
}
Comment form

Please type the word 'sexy' here:

BB code available :

  • [b]...[/b] : bold
  • [it]...[/it] : italic
  • [q]...[/q] : quote
  • [c]...[/c] : code
  • [url=...]...[/url] : url