CSS Equal Column Height Problem
Many of you have encountered this at one time or another - you can't get your columns to dynamically resize themselves to match the tallest column in your "container" div. Here a couple good solutions to the problem.Prototype
First off, here's a Prototype solution. Just be sure to change the 2nd and 3rd lines to match your div names.
function equalizePanels() {
var col = $('content-navigation-panel');
var tbx = $('content-right-toolbar');
if(tbx && (Element.getHeight(col) < Element.getHeight(tbx))) {
col.style.height = Element.getHeight(tbx) + 'px';
} else if(tbx && (Element.getHeight(col) > Element.getHeight(tbx))) {
tbx.style.height = Element.getHeight(col)-25 + 'px';
} else {
var el = $('content');
col.style.height = Element.getHeight(el) + 'px';
}
}
Second, here's a Javascript solution from Dynamic Drive:
http://www.dynamicdrive.com/style/blog/entry/css-equal-columns-height-script/