Question

Can we put jQuery to use to create columns of equal height? If yes, how?

Answer 1

Update from 2022

JavaScript

jQuery is a bit overkill for something like this; you could use vanilla JavaScript:

// Construct a NodeList of all column elements
const columns = document.querySelectorAll(".column");
// Determine the tallest Node in the list based on its offsetHeight
const tallest = Math.max( ...[ ...columns ].map( c => c.offsetHeight ) );
// Apply that height to all Nodes in the NodeList
columns.forEach( column => column.style.height = `${tallest}px` );

Or (preferably) CSS

In reality, JavaScript probably shouldn’t be used at all. Modern browsers have supported Flexbox for quite some time, which is capable of keeping laterally-placed elements equal in height:

Assuming the following (taken from original demo below):

<div class="container">
    <div class="column">Foo</div>
    <div class="column">Foo<br/>Foo<br/>Foo</div>
    <div class="column">Foo</div>    
</div>

Flexbox creates columns of equal-height (based on the tallest) with the following:

.container {
    display: flex;
}

---

Original Answer

Cycle through each column, and find the tallest. Then set all to that height.

var maxHeight = 0;
$(".column").each(function(){
  maxHeight = $(this).height() > maxHeight ? $(this).height() : maxHeight;
}).height(maxHeight);​

Online Demo: http://jsbin.com/afupe/2/edit