This post will help you create a three column site containing a header, navigation, three columns and a footer. The design you are about to use is a basic layout for  a simple  site. I have used pixels for the dimensions. This is not my preferred method as I use em which is relative to the font size, and in my opinion much better. However,  you will need a clear understanding of the basics before attempting to make your sites dimensions relative to the font size.

DTD declaration

This declaration is very important, without it not only will your page fail validation but if you choose to add CSS 2 functionality into your layout it may not work. Now we need to consider the differences between browsers and how they interpret CSS.

CSS Code

To start with each browser has its own style-sheet that it loads on elements that do not have styles defined. These styles can be overridden by our style-sheet. As a point of reference users can have their own style-sheet that overrides our styles but this is rare and usually used mainly by users with disabilities.

The CSS starts with a declaration of * that sets the margin and padding to ‘0′ for all elements that do not have margin or padding defined. I like to do this to set a level playing field for all elements across all browsers.

The next two lines are used to centre the site across browsers. Internet Explorer and Firefox have a difference of opinion when it comes to dealing with the text-align attribute. when defined as text-align:center, Internet Explorer places all content in the center, where as Firefox places just the text elements centrally. You can see from the example that we have set the body tag to have its text aligned to the centre. On the next line we have defined a class called wrapper which we will use as a container. Within wrapper their are three very important attributes to make this technique work, firstly width. A fixed width must be defined, in this case I have chosen 1024px. next margin:0 auto; this clamps the container to the top and center of the browser within Firefox. The third is to correct our text setting, to do this we set text-align:left; now all content within the wrapper will be left aligned. so treated as normal.

The Header & Nav

Here is where the calculations start but don’t panic they are not that hard really. We have to take into account width and height, I have purposefully set them within the container to 1024 by 600. You will notice I have not set a width for the  Navigation div, this is to demonstrate that CSS will make any element without fixed dimensions fill it’s container automatically. I have however used height in the Header and Navigation which I have set to heights of 50px and 25px respectively. We now have to take these off the 600px so we are left with 525px left to play with.

Nav Links

With the links I have just removed the bullet point styling and displayed them inline. I then gave them a padding of 20px this spaces the links adequately. But it pushes out the first link too far, to combat this I have given the first link a class of first and removed the padding to the left, this pulls the links back to the left and inline with the rest of the design.

The Footer

It may sound weird to be adding the footer at this stage before the content but it really doesn’t matter, it makes sense to me because i like to know how much space I have to play around with for my content. This is the easiest code of all, we are going to set the height of the Footer to 50px, and then add a clear:both; setting. The clear:both; is because we are going to be floating the columns that hold our content so in order to make sure our Footer does not disappear beneath those columns we clear:both;

The Columns

All that remains is for us to create the three columns. I have given the three divs used to create the columns classes of left, middle and right. I now float all three columns to the left, setting their heights to the remainder of our height calculation 475px and the overall width is divided up evenly between them. left & right having 250px each and middle having the remaining 524px. Below you can find a link to a very colourful example of the finished product of this tutorial. hope it helped.

3 column Example