CSS - Three Column Layout with Header -Absolute Positioning

A popular layout among web designers is the 3 column layout. It allows a lot of flexibility for content layout. It is often used to add additional links for categories on the left and lining up sponsors down the right hand column. In this web site design tutorial we'll use absolute positioning to set up a basic 3 column website with a header for the logo. This example will use the above format and place links in the left column, body of content in the middle and sponsors or additional content for the right sidebar column.

Heres a screenshot of what we'll be building:

If you don't have an HTML editor you can create a text file using wordpad and add these lines of code:

Save and name it as 3column.html. To reduce clutter between the head tags, we'll attach a external CSS stylesheet. Create an additional text file and save and name it 3column.css. Make sure to put both files in the same directory when you upload them to your server. To attach an external CSS stylesheet place this line of code under the title between the head tags: <link href="/img_articles/16719/3column.css" rel="stylesheet" type="text/css" /> . The entire code so far looks like this:

Let's start setting up our web page. Between the body tags create the header area and the columns for the content by adding these lines of code: (note: I added some dummy text to the content area that I got from www.lipsum.com ).

Since we haven't added anything to the stylesheet yet, your layout should look something like this:

Before we start styling the columns, add this line of code to the 3column.css stylesheet:

This will move everything up to the top edge by overriding the default margin. Next, let's start styling the header by adding these lines to the 3column.css stylesheet :

Notice we set the margin-top value to 0px under #header h1. This is because some browsers such as firefox will push the header away from the top edge so we must add a 0px to override the default margin. We also added a top padding of 20px to the header div so we could push the title down to to the middle of the header.

Next we align the two side columns. Add these lines to your 3column.css:

We set the value of the #links to left: 0px and the #sponsors column to right: 0px. When using absolute positioning you must set these values like this so they will always ride up against their edges. Then we can use the left and right margins to push them away from the edge just a little. In this case 15px. Top margins where set to 135px to push them out of the header area and into the body where we want them.

Next, we add the margins to the the content div to center it in the middle and style the <h5> heading to our liking:

There are many different ways to style this web page by adding picture(s), colors, custom graphics and by adding your logo to the header. Just experiment and have fun!