Phosphorus and Lime
A Developer's Broadsheet
This blog has been deprecated. Please visit my new blog at klenwell.com/press.
Thursday, August 02, 2007
JS: balancing columns
A common problem: set two html blocks to the same height using only css and without tables. I've usually solved this in the past by using tables. But I figured it was time to grow up and figure out the "modern" div-based method for setting two side-by-side blocks to the same height.
Here's a javascript function that returns the max height for two html blocks:
From here, it's just a matter of setting each block to the max height:
I'm working on a version of this that can take n elements and equalize the height. I'll post that to the klenwell repository when complete and tested.
Here's a javascript function that returns the max height for two html blocks:
function get_max_div_height(id1, id2)
{
var Dom1 = document.getElementById(id1);
var Dom2 = document.getElementById(id2);
var h1 = Dom1.offsetHeight;
var h2 = Dom2.offsetHeight;
max_ht = Math.max(h1, h2);
// debug
// alert("compare " + id1 + " & " + id2 + " heights: " + h1 + " / " + h2 + " -> max: " + max_ht);
return max_ht;
}
{
var Dom1 = document.getElementById(id1);
var Dom2 = document.getElementById(id2);
var h1 = Dom1.offsetHeight;
var h2 = Dom2.offsetHeight;
max_ht = Math.max(h1, h2);
// debug
// alert("compare " + id1 + " & " + id2 + " heights: " + h1 + " / " + h2 + " -> max: " + max_ht);
return max_ht;
}
From here, it's just a matter of setting each block to the max height:
document.getElementById(dom_id).style.height = max_ht + "px";
I'm working on a version of this that can take n elements and equalize the height. I'll post that to the klenwell repository when complete and tested.
Labels: javascript
some rights reserved, © 2006