Self Adjusting Equal Height Columns

One of the hardest things to do when developing web pages with divisions is to get adjacent divisions to expand equally with content. Most beginners will end up with a page that looks like this:
Unequal columns


That's the main reason so many people stick to building pages with tables. It was never a problem to get all of your columns the same length.

An Easier Solution

To be frank, it is very difficult to create columns of equal length using divisions, if you don't use absolute settings and set them all to the same height.

It is however pretty easy to create the illusion of equal columns using a simple background image.

In this tutorial, we'll show you how to take a background image like the one shown here:
background image


add it to your main division and create the illusion of equal columns.

Note: You can create these background images with a simple graphics program like MS Paint. We've also provided a gallery of backgrounds that you can use on your web pages. Free Columns Gallery

Before You Start

This tutorial is not for first time website authors!! If this is your first attempt at creating a web page with divisions, I highly recommend that you visit our sister website www.createasite.net and complete that simple tutorial on creating a 3 page website (Intermediate Phase I) using divisions and css. Do That First

What We're Doing

This tutorial will only be concerned with creating the content section of your web page. We'll create 3 columns. The same techniques can be used to create a 2 column page, you would just need a different background image similar to this one.
2 column background


We'll be using the 3 section background image shown above to create a 3 column page (body section) with maroon side columns.

Here's is a demo page created using the technique and the background image shown above. View Page

How It's Done

It takes 5 separate divisions to create a 3 column set up and center it on the page. Take a look at the diagram shown below:
Diagram of equal column web page.


Starting from the interior, we have 3 divisions left, middle and right nested within a 4th division named main.

In order to make the main division expand with its contents it has to be floated.

When ever you run into problems with getting your background image to show up it will always be because you forgot to float the main division. If you don't float it it won't expand with the contents.

All four of these divisions are nested in a 5th division called center-page for the purpose of centering the columns on the web page.


This is the HTML code used to create the 3 columns:
<div id="center-page">
<div id="main">
<div id="left">
</div>
<div id="middle">
</div>
<div id="right">
</div>
</div>
</div>

This is the CSS used to format the HTML code:
* {
padding:0 0 0 0;
margin: 0 0 0 0 }

#center-page {
width: 1000px;
margin: 0 auto 0 auto }

#main {
width: 1000px;
background-image : URL(images/3col-maroon-bkg.gif);
float: left }

#left {
width: 200px;
float: left }

#middle{
width: 600px;
float: left; }

#right {
width: 200px;
float: left }

Experienced Coders

If you know how to create simple html pages and link style sheets to them, copy the HTML code into a basic page. Copy the CSS into a style sheet, save it and link the HTML page to it. Copy the background image and save it in the appropriate location. Then add some content to the divisions and test the technique for yourself.

Header and Footer

Header and footer divisions can be placed inside or outside of the center-page division. Use the same techniques shown here for centering and aligning multi column elements.



Related Information

Use these lessons in our HTML tutorial to get a better understanding of building web pages with division tags and CSS.
The Division Tag
The ID Attribute
3 Columns without tables

These web page examples are designed without any margins, padding or borders added to the nested divisions. Read why here: Visual Diagrams

More Web Page Resources

You can get a logo for your web page made free at our Web Graphics Gallery.

Get your navigational buttons at our Button Gallery or go to Creating Buttons With CSS