So this is a topic where a lot of people have many different opinions on the best way to do CSS positioning and so give you a little perspective as to how frustrating it can be. I saw an pie graph the other day that showed a layout of a Web Designers time spent on a web site and about 1/5 was “Time spent trying to get CSS position to work, then giving up and using tables” and this is such a true statement. I can’t tell you how many times that has happened to me. But by using tables you are flexible in your layout but not as flexible as using CSS positioning. The major benefit of using CSS is if you want to change the look you don’t have to change every page, just the CSS.

So if you have a 100 page web site and a year later you want to move the navigation to the right side instead of the left. Well if you used tables you would have to edit every single page but if you used CSS you can simply change the CSS file and it updates every single page.

Now I spoke about CSS and briefly touched on CSS positioning in a previous article I wrote “Cascading Style Sheets” so I am going to speak more to how I acutally position items on a web page because there are about a 100 ways to get the same result.

So what I have done in the above CSS is I created a “container” which is going to contain everything within the viewable area of the web page except the footer. Since all of my other positions are going to be absolute, they will be positioned according to the
relative “container” position. If I didn’t have the “container” position as relative then all the other positions would be relative to the

I added everything within the “container” div tags except for the footer, the reason for this is to make for sure that the footer will remain at the bottom of the web page.