The only way I know how to get these fluid columns to stretch is by using some javascript...
It looks like this :
function sortNum(a,b) { return b-a}
function fixH()
{
var option=['left','right','centre'];
var nh=0;
for(var i=0; i<option.length; i++)
{ document.getElementById(option[i]).style.height="auto";
var h=document.getElementById(option[i]).offsetHeight;
var nh=(h>nh)? h : nh;
}
for(var i=0; i<option.length; i++)
{ document.getElementById(option[i]).style.height=nh+"px";
}
}
window.onload=function(){fixH();}
window.onresize=function(){fixH();}
When the window is narrow, this layout could break so I've added a minimum width.
This for Firefox :
body {
min-width:600px;
}
and this for stupid-boy (IE) :
<!--[if gte IE 5]>
<style type="text/css">
body {width:expression( documentElement.clientWidth < 600 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 600 ? "600px" : "auto") : "600px") : "auto" );}
</style>
<![endif]-->
There's probably a much shorter way to do this that works fine, but this works for me, so...
This has a fixed-width right column and two more fluid columns. I had to (maybe) use some javascript to get the columns to fill the height as I couldn't (I think) use faux columns... As you can tell, I'm not sure this is the best way, but it works...
First we have a containing div called #wrap.
<div id="wrap">
</div>
Inside that go the header, the right sidebar and #main. Inside the #main div are the left and right columns, which are fluid. There's also a clearer div which clears the floats and makes space for the footer.
<div id="wrap">
<div id="header">Header</div>
<div id="inner-wrap">
<div id="right">Right</div>
<div id="main">
<div id="left">Left</div>
<div id="centre">Centre</div>
</div>
</div>
</div>
The #wrap div is set to min-height:100% so that the page is, well, at least 100% high. The other bit after that is for IE, which is a bit stupid. IE doesn't understand 'min-height', but it treats 'height' in the same way as a good browser would treat 'min-height' so we're OK. When you tell the browser 'height:100%' though, it needs to know 100% of what? To make it clear, html and body are both set to 100% too.
html {height:100%;}
body {
margin:0;
padding:0;
height:100%;
background-color:#ffffff;
font-family:arial, serif;
}
#wrap {
min-height:100%;
margin:auto;
}
* html #wrap {height:100%}
The inner-wrap contains the floats and has 80px of bottom padding which leaves room for the footer. After all the rest of the content comes the footer.
<div id="wrap">
<div id="header">Header</div>
<div id="inner-wrap">
<div id="right">Right</div>
<div id="main">
<div id="left">Left</div>
<div id="centre">Centre</div>
</div>
</div>
</div>
<div id="footer">Footer</div>
The footer has a negative top-margin which brings it up into the space left by the inner-wrap.
#inner-wrap {
padding-bottom:80px;
}
#inner-wrap:after {
content:" ";
display:block;
clear:both;
}
#footer {
height:80px;
background-color: #333333;
margin:0; padding:0;
margin-top:-80px;
color:#FF00FF;
text-align:center;
margin:auto;
}
The right column is 200px wide and float:right, while the #main div is position:relative with a 200px right-margin so we have two sections. There's a hack for IE so that the #main div 'haslayout'.
The left and centre divs are done in percentages.
#right {
float:right;
width:200px;
text-align:center;
}
#main {
position:relative;
margin-right:200px;
background-color:#ccFFCC;
}/* mac hide \*/
* html #main,
* html #inner-wrap {
height:1%;
}
/* end hide*/
#left {
float:left;
width:49%;
background-color:#FFFFCC;
}
#centre {
margin-left:50%;
}
And that's about it really...