lime icon

Phosphorus and Lime

A Developer's Broadsheet

This blog has been deprecated. Please visit my new blog at
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.