3 Columned Layout with CSS

December 7, 2006

I’m currently working on a website where I wanted the following:

  • the front page is split horizontally into two halves, with a separate header and footer (4 components in all)
  • the top half of the page needs three columns
  • the bottom half of the page needs two colums
  • MUST USE CSS for layout!! NO TABLES

This is my first attempt at creating layout purely with CSS <div> tags and not on tables.

Here is a mockup of the page as I wanted it layed out:

Page Layout

And here is the design as it stands now (I’m still working on it):

Page Display

How I achieved this:

Getting the “shadows” down the side of the page:

This is achieved by creating a background image that you apply to your <body> tag in the stylesheet. The image looks like this:

Background image

and is basically the width of all your content. You repeat this background vertically to get it tiling down the length or your page. The relevant CSS code to achieve this background effect is:

body {

The background-color is set to the colour of the edge of your background image, so it seemlessly carries on the effect of your image. repeat-y tiles the background image vertically. Setting the background-attachment:fixed means the text will scroll over the image, and the image won’t scroll with the page.

Creating three columns:

Is basically creating two columns (one left and one right) and having the content of the third, middle column, squeeze between the two.

First, create a <div> container to bound the three columns – I’ve called this <div> introcontent:

#introcontent {
/*border:solid thick purple;*/

When playing with the creation of columns, I find it useful to set each <div> with a border so I can see how it is placed, that is commented out in the first line of code (above).

The trick to getting this <div> centred on the page over my background image is to set the left and right margins as auto. The bottom margin is used to give some space between the two top and bottom halves of my page.

The trick in getting these three columns to work was the display:table code: This is because to create the columns within the introcontent <div> you have to make them float (left and right respectively). From what I understand, when a <div> is set to float it acts (and I’m not sure of the technical terms here) out of the structure of the document. So even though the columns are coded inside the <div> they float on top of it instead, so without the display:table command, the introcontent <div> appeared not to contain any content, and would not fill-out any height, it acted as if it were empty. Applying the display:table code fills out the introcontent <div> and fills it out with content, so it takes up the vertical space required on the page.

Next create <div> tags for the three columns which will sit inside the introcontent <div> – I’ve called them column1 (left), column2 (middle) and column3 (right):

.column1 {
/*border:thin solid green;*/

.column2 {
/*border:solid thin black;*/

.column3 {
/*border:thin solid red;*/

I know the widths I want my left and right columns to be, and the padding I want, so those are set. Float your left column left, and your right column right. Your middle column (bordered in black below) will be the width or your container <div>, in this case introcontent (bordered in purple below), but its content will be squeezed between the left column (bordered in green) and your right column (bordered in red).

Page display of columns

I’ve put an image in my right column, which is also floated right.

When writing the html for this, it appears that the order in which you call the columns makes a difference. I had to call the columns in the order 1, 3, 2 or left, right, middle:

<div id="page">
<div id="introcontent">

<div class="column1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec,</p>

<div class="column3">
<img class="title" src="img/fake-title.gif" alt="alt tag" title="title" />

<div class="column2">
<p>A number of links contained in here usually...</p>


In the code above I’ve used classes to style the columns, I think a better way to do it would be to have all common elements used in a id tag instead, e.g.

# column {
/*insert common elements here*/

And have unique elements as classes:

.left-column {
/*insert unique elements here*/

Marked up thus:

<div id="column" class="left-column"></div>

This is just the part of CSS coding for the site which I’ve used to create a three column layout. Doing a search on Google or whatever search engine you prefer to use for “three column layout” gave me several useful results – some of the suggestions I’ve used here, but some I found overly complicated. Also, the way I’ve used these three columns is not the tradional ‘page content and two sidebars’ that a lot of the tutorials I’ve read are aiming for.

Great Example of a WordPress Archive

December 2, 2006

Whilst looking for free web icons, I found this great example of a WordPress ‘Archive’ page. It’s headed up: Chronology, Folksonomy, Taxonomy. A beautifully succinct and accurate organisation. I’ll be using that idea.

It’s also well organised, so I must remember the Archives plugin being used is apparently: Extended Live Archives.