Style: Easy

Here is a working example.

Previously, I wrote a tut about providing equal height columns here. I liked the way it turned out so much, I thought I'd give a name and throw it in my Home Made Layouts section. Creating equal height columns with CSS has always been hard! But not this layout - this is easy!

<!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>{ visibility: inherit; } Style: Equal</title>
<style type="text/css">
<!--
/* --------------------------------------------------
Style: Equal
Author: Eric Watson
Website: www.VisibilityInherit.com
----------------------------------------------------- */
* {
	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 {
	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;
	padding:0 0 20px;
	background:url(images/equal-columns-header.jpg); /* height of image is 52px */
}
#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;
	top:72px;
	bottom:70px;
	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;
	top:auto; /* IE6 does not understand top and bottom positioning */
}
#header {
	position:relative; /* allows z-index value */ 
	z-index:1; /* places header above faux columns */
}
</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>