Equal Height Columns
There is a well known technique to get equal height columns using the CSS float Property, this might be better then my position-based technique, at least it seams more safe to rely on, also when it comes to backwards-compatibility. This layout includes a Header and a Footer, aka TopContent and BottomContent.
Anyway the technique works by using a wrapping division for each column you are going to have, each of these are then floated towards the left of the screen, and positioned using position: relative;. Additional wrappers are used around the content, which are then moved back in place using relative positioning.
As usual feel free to use this Technique in your own layouts, without linking back, or referring to me in any way.
No hacks images or negative-margins
Some of the best about this layout is that it doesn't use hacks, negative margins, or JavaScript like other Techniques dose.
Browser Support
Example tested in the following browsers. IE6, IE7, Firefox 3.0.4, Safari 3.1.2, Opera 9.52.
It might also work in browsers not listed, its just the ones, that i bothered to test in, after coding the layout.
Solved Problem with overflow in IE
I encountered a problem where IE wouldn't apply the overflow: hidden; to cut away the overflow created by the relatively positioned 100% width divisions. This wouldn't be a problem if the page was left-aligned, i however wanted to have a centered layout, so i solved the problem by simply applying position: relative; to the Basement division.
Source Code
The full source for this layout is shown below, read the comments in the CSS for more info.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Equal Height Columns Using Floats</title>
<style type="text/css">
* { margin: 0; padding: 0; }
body {
background: #72c1ca;
text-align: center;
}
.S1 { /* Shared Styles */
position: relative;
float: left;
}
.S2 { /* Shared Styles */
width: 100%; /* needed for positioning */
}
#Basement {
position: relative; /* fixes overflow bug in IE */
min-width: 550px;
max-width: 1024px;
width: 75%;
background: #4f75ff;
margin: 1em auto; /* Centers the page and applies a 1em top margin */
overflow: hidden; /* hides the overflowing floor divisions */
text-align:left;
}
#FirstFloor {
background: #e6f4f4;
}
#SecondFloor {
background: #ffffff;
right: 20%;
}
#ThirdFloor {
background: #e6f4f4;
right: 60%;
}
#CenterContent {
left: 100%;
width: 60%;
}
#LeftContent {
left: 20%;
width: 19%;
}
#RightContent {
left: 81%;
width: 20%;
}
</style>
</head>
<body>
<div id="Basement">
<div id="TopContent">TopContent</div>
<div id="FirstFloor" class="S1 S2">
<div id="SecondFloor" class="S1 S2">
<div id="ThirdFloor" class="S1 S2">
<div id="CenterContent" class="S1">
</div>
<div id="LeftContent" class="S1">
</div>
<div id="RightContent" class="S1">
</div>
</div>
</div>
</div>
<div id="BottomContent">BottomContent</div>
</div>
</body>
</html>
The above code uses embedded CSS, it is recommended to use External StyleSheets.
RightContent