Layouts / Illustrations

3 equal-height columns, stretchable layout + Tutorial!

Once again with the little help from A List Apart I present you now a layout that solves one of the biggest headaches of the table-less trend followers - equal height columns. No JavaScript involved!

This layout is xhtml 1.0 and css valid and optimised for IE and Opera as well as browsers with the Gecko and KHTML rendering engines.

You may use it freely for any purpose without seeking my permission.
A link back to would be greatly appreciated.

So how is it done?

There are two CSS methods involved, one responsible for the horizontal flexibility of the layout and the other for achieving equal-height columns.

How to create a 2-column stretchable layout?

First, create 2 divs with IDs body and side. Remember that regardless of if you want the side column to be on the left or on the right, the body column has to come first in the code. This way you will improve the accessibility of your website.

<div id="body">body column</div> <div id="side">side column</div>

Both DIVs need to have a float:left assigned to them. #body needs to occupy the entire width of the screen. #side can have the width of your choice. It's best to always remove any default margins and paddings some elements might have.

* {margin: 0; padding: 0;} #body {float: left; width: 100%;} #side {float: left; width: 200px;}

We need one additional DIV element inside #body, it's necessary to make space for the side column.

<div id="body"> <div id="inside">body column</div> </div> <div id="side">side column</div>

Let's create a layout with the #side column on the left. #inside therefore needs a margin on the left equal to the #side column's width. #side on the other hand needs a negative margin on the left equal to the width of #body.

* {margin: 0; padding: 0;} #body {float: left; width: 100%;} #inside {margin-left: 200px;} #side {float: left; width: 200px; margin-left: -100%;}

Creating a layout with the #side column on the right is just as easy. Simply assign the margin to #inside on the right instead of on the left and #side's negative margin must be equal to its width.

* {margin: 0; padding: 0;} #body {float: left; width: 100%;} #inside {margin-right: 200px;} #side {float: left; width: 200px; margin-left: -200px;}

How to create a 3-column stretchable layout?

The only difference from the 2-column layout is that #inside needs to have a margin on both sides. Positioning of the side columns on the left and right is exactly the same as in the previous examples.

<div id="body"> <div id="inside">body column</div> </div> <div id="side1">side column left</div> <div id="side2">side column right</div>

* {margin: 0; padding: 0;} #body {float: left; width: 100%;} #inside {margin-left: 150px; margin-right: 200px;} #side1 {float: left; width: 150px; margin-left: -100%;} #side2 {float: left; width: 200px; margin-left: -200px;}

How to make the columns' height equal using CSS?

Back in the times when we were using tables to build the layout's structure, it was all so easy. TDs would automatically stretch according to which one had more contents. There are excellent javascripts to make DIVs or other elements behave this way. But if you don't want to use javascript, here's a simple technique based entirely on CSS.

Let's start with creating two DIVs and put them inside another DIV.

<div id="container"> <div id="side1">Left column</div> <div id="side2">Right column that contains more contents than the left column.</div> </div>

Assign them floats and widths to put them next to each other. Let's assign them different colour backgrounds to see the effect better.

* {margin: 0; padding: 0;} #side1 {float: left; width: 150px; background: #f00;} #side2 {float: left; width: 200px; background: #ff0;}

The trick now is to assign a large bottom padding and an equal negative bottom margin to each column. To hide the extra space created below each column, assign height:100% and overflow:hidden to the #container.

* {margin: 0; padding: 0;} #container {height: 100%; overflow: hidden;} #side1 {float: left; width: 150px; background: #f00; padding-bottom: 2000px; margin-bottom: -2000px;} #side2 {float: left; width: 200px; background: #ff0; padding-bottom: 2000px; margin-bottom: -2000px;}

And that's it! Of course, as you might have already figured out, the columns aren't really equal, they only pretend to be. So forget about bottom borders or positioning background images vertically to any other position but top. If these are essential for you, you can use the script mentioned earlier.

How to combine these two methods?

If you paid attention so far, the code will speak for itself.

<div id="container"> <div id="body"> <div id="inside">body column</div> </div> <div id="side1">side column left</div> <div id="side2">side column right</div> </div>

* {margin: 0; padding: 0;} #container {height: 100%; overflow: hidden;} #body {float: left; width: 100%;} #inside {margin-left: 150px; margin-right: 200px; padding-bottom: 2000px; margin-bottom: -2000px;} #side1 {float: left; width: 150px; margin-left: -100%; padding-bottom: 2000px; margin-bottom: -2000px;} #side2 {float: left; width: 200px; margin-left: -200px; padding-bottom: 2000px; margin-bottom: -2000px;}

There's just one "but" - Internet Explorer. If the middle column is the longest, everything's fine. BUT if one of the side columns is the longest one, the #body column doesn't stretch. It can be fixed if you add the following code to your style sheet.

* {margin: 0; padding: 0;} #container {height: 100%; overflow: hidden;} #body {float: left; width: 100%; padding-bottom: 2000px; margin-bottom: -2000px;} #inside {margin-left: 150px; margin-right: 200px; padding-bottom: 2000px; margin-bottom: -2000px;} #side1 {float: left; width: 150px; margin-left: -100%; padding-bottom: 2000px; margin-bottom: -2000px;} #side2 {float: left; width: 200px; margin-left: -200px; padding-bottom: 2000px; margin-bottom: -2000px;}

Below you can find a full site structure based on the methods presented in this tutorial.

see live demodownload .html & .css