So this is it. The step you've been waiting for. Pure CSS design. Hopefully by now you've picked up some valuable lessons about styling tables and using floats and lists, but you want to go whole 9 yards. Now, I'm not going to cover CSS positioning in depth here, the blog post had links to loads of sites that covered that. Instead I'm going to try and point you in the right direction and warn you about some potential pitfalls.

You've heard the buzz, and you're ready to get stuck into your first build using absolute or relative positioning. Well, you might be off the mark I'm afraid.

I often find people are surprised to learn that modern CSS layouts often have nothing to do with absolute positioning. Why? What's wrong with absolute positioning? It's the whole reason you're reading this article after all. Well, absolute positioning has one major drawback: every time you absolutely position a element with CSS (like a <div> example) you remove it from the document flow. I can sense the blank expressions but bear with me a minute. Lets talk about document flow.

Take the following example:

Basically we've got a <div> with some text and another <div> inside it. The nested <div> has no positioning on it at all just now.

Lets add some absolute positioning to the nested <div> and see what happens:

See what happens? The absolutely positioned box now sites on top of the text inside the main <div>. This is because the box has been removed from the document flow. Essentially the text doesn't know it exists, and the box just sits on top of it. This is what absolute positioning does.

This can create some problems when designing a page, especially with things like footers. If you think of the way a footer works (it sits underneath everything above it) it has to be part of the document flow. If it doesn't register all elements in the design you'll get bits sitting on top of other bits like in the example above.

It's a common problem, and one you'll see brought up time and time again on CSS forums, and it's all down to the inherit limitations of absolute positioning. The solution: don't use absolute positioning. Instead use margins and padding to control positioning, combined with some sneaky use of floats to solve the footer problem. Like I say, I'm not going over that now, we'd be here all day, but it's worth bearing in mind when you're looking at other tutorials. Most seem to concentrate on absolute positioning when it's often not the best solution.

Note: I'm not saying absolute positioning is always wrong. This site uses it for example, but for many layouts it is unneccessary and can lead to problems.

Ok that's it. By now you should be well on your way to creating sites with CSS layouts. Don't worry if you don't get there overnight. CSS layouts are hard at first, but with the steps above you can take it step by step improving your code with each new attempt. Stick with it though, it's worth it in the long run.

Good luck!