lime icon

Phosphorus and Lime

A Developer's Broadsheet

This blog has been deprecated. Please visit my new blog at klenwell.com/press.
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:

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;
}


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: