CSS Equal Height Columns Tutorial
"I think" this is by far the easiest way to provide equal height columns with CSS! Paul O'B (as usual) was the original creator of this technique. Be sure to read his article for a detailed explanation on the how's and why's - it's a good read!
Long story short, basically, we're placing three fake columns (i.e. "faux columns") behind the three real columns in order to give the appearence of equal height columns. These faux columns only mirror the color and style of the real columns. In other words, they hold no content - they are only there for show. The real columns (and anything you want to be above the faux columns) are simply given a higher z-index value. But remember, elements must be given a position in order to utilize z-index. In this case, and in most cases, position relative works nicely. No repeating images are needed, and the three extra divs are tucked away nicely at the bottom of the layout (out of site - out of mind!).
The only real draw back to using this method, is that (in IE6 only) you have to creatively hide the protruding "faux columns" from revealing themselves as they pop out the top of the "real columns". In my example, I hid the faux columns from popping out the top with borders, background colors, and a higher z-index on the header and the h1. Note though: Alternatively, we can just feed IE6 it's own set of rules (view the source code to see the difference), and therefore, we only have to hide the faux columns from IE6. For instance, using the below code as an example, we can simply use top:72px instead of height:100% on the faux columns. In doing so, nothing needs to be hidden from modern browsers and this method is absolutely flawless! However in my original example, instead of feeding IE6 it's own set of rules, and possibly making things more confusing, I thought I'd keep all the code the same for every browser (most of it anyways), in an effort to more clearly show how easy this technique really is. Who knows, maybe I made it more confusing? Oh well, either way, now you at least know you have options! Paul used a different method to hide the faux columns in his demo, and I'm sure there are many other ways to hide them as well. Just like everything else with CSS - there are always twenty different ways to do the same thing!
In fact, after writing this tutorial, I cooked up yet another way to hide the faux columns from IE6! Just view the source code to see the difference. In my opinion, it's definitely the cleanest of the three examples thus far. I almost just pulled all the code from the original two examples and used this instead, but, I figured more the merrier. After all, this is all here to learn from right? Me included!
The Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Equal Height Columns With CSS - The Easy Way!</title>
<style type="text/css">
<!--
* {
margin:0;
padding:0;
}
html {
height:100%;
}
body {
margin:0 auto;
height:100%;
background:#666;
}
p {
font-size:1.2em;
text-align:center;
margin:20px;
}
h1 {
height:50px; /* enables header background color */
background:#999; /* provides header background color */
text-align:center;
font-size:1.4em;
line-height:2.1;
}
#wrapper {
margin:0 auto;
min-height:100%;
width:782px;
position:relative; /* enables faux columns to be positioned relative to wrapper */
background:#999;
border-left:2px solid #000;
border-right:2px solid #000;
overflow:hidden; /* clears floated columns in FX, Opera, Safari, & Chrome */
}
#header {
height:52px; /* gives header 2px bottom border */
background:#000; /* 2px bottom border color */
position:relative; /* allows z-index value */
z-index:1; /* places header above faux columns */
border-bottom:20px solid #999; /* provide space below header & hide faux-columns */
}
#footer {
position:absolute;
bottom:0;left:0;
width:782px;
height:50px;
background:#999;
border-top:2px solid #000;
clear:both; /* clears floated columns in IE */
}
.column {
float:left;
width:230px;
margin:0 0 75px 20px; /* margin-bottom clears footer */
background:#CCC;
display:inline;
position:relative; /* allows z-index value */
z-index:1; /* places "real columns" above "faux columns" */
border-top:2px solid #000;
border-left:2px solid #000;
border-right:2px solid #000;
}
/* ------------ faux columns ------------ */
.faux-column {
position:absolute;
bottom:70px;
height:100%; /* modern browsers get this */
width:230px;
background:#CCC;
border-left:2px solid #000;
border-right:2px solid #000;
border-bottom:2px solid #000;
}
.a{left:20px;}
.b{left:274px;}
.c{left:528px;}
-->
</style>
<!--[if IE 6]>
<style type="text/css">
#wrapper{height:100%;overflow:visible;}
.faux-column{height:999em;}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Header</h1>
</div>
<div class="column">
<p>Yada yada yada yada yada yada yada yada.</p>
</div>
<div class="column">
<p>Yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada.</p>
</div>
<div class="column">
<p>Yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada.</p>
</div>
<div id="footer">
<h1>Footer</h1>
</div>
<div class="faux-column a"></div>
<div class="faux-column b"></div>
<div class="faux-column c"></div>
</div> <!-- end #wrapper -->
</body>
</html>
