One of the difficulties with using the Holy Grail fluid layout is its usage of the PIE Method here. If you are going to do jump links you will be pulling your hair out.
So we are left with the common css layout quandry...do we use more complex css to get our floated columns equal heights or do we use javascript? The pragmatist in me says javascript. Maintainability is more important to me than the few users who aren't using javascript on my site.
I adapted this script from another I found (noted in code) to work with the prototype.js library. This also fixed an IE7 issue.
/*Adapted from http://www.thewatchmakerproject.com/journal/308/equal-height-boxes-with-javascript
fixing IE7 compatibility issues and using prototype.js loaded first*/
var CSSColumns = {
maxHeight: 0,
els: new Array(),
equalise: function(){
for (var i=0;i<arguments.length;i++) if (!$(arguments[i])) return;
for(var i=0;i<arguments.length;i++)
{
this.els.push($(arguments[i]));
}
this.maxHeight = this.calcMaxHeight();
for(var i=0;i<this.els.length;i++){
this.els[i].style.height = this.maxHeight + "px";
}
},
calcMaxHeight: function(){
var h = 0;
for(var i=0;i<this.els.length;i++)
{
if(this.els[i].getHeight()>h)
{
h=this.els[i].getHeight();
}
}
return h;
}
}
So to attach it to my window.load event I can just use this
<script type="text/javascript" src="${siteRoot}/Content/javascripts/csscolumns.js" ></script>
<script type="text/javascript">
Event.observe(window, 'load', function() {
CSSColumns.equalise('content','c1','c2','c3');
});
</script>
You simply pass in the element ids that you need to have height matching. Note that I am also passing a container element called 'content' that wraps my floated 'c1,c2,c3' divs. Otherwise, the divs will not be pushed all the way down.
It tested fine in FF, IE7, and Opera (who cares). Haven't fired it in IE6 but I'm sure it'll suck and I'm not sure I care about that :)