Equal height columns

[deepfriedmind]

I've tried the most common techniques for achieving equal height columns (with differing content) but can't seem to get it working. I mean equal as in all columns in a row being the same height as the tallest one, not simulating it with background color or something like that. Anyone have some ideas on how to get it working specifically with the 1140px grid system?

Hi, i found jQuery solution made by Steven Akins, modified by unknown, and little tuned by myself.

You need only to set class for resized divs ("yourresizeddiv" in script, adjustable).

var currentTallest = 0;
var currentRowStart = 0;
var rowDivs = new Array();

function setConformingHeight(el, newHeight) {
 // set the height to something new, but remember the original height in case things change
 el.data("originalHeight", (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight")));
 el.height(newHeight);
}

function getOriginalHeight(el) {
 // if the height has changed, send the originalHeight
 return (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight"));
}

function columnConform() {
     var currentTallest = 0,
     currentRowStart = 0,
     rowDivs = [],
     elements = $('div.yourresizeddiv');

     // first remove originalHeight data and reset height
     elements.removeData('originalHeight').height('auto');

     // find the tallest DIV in the row, and set the heights of all of the DIVs to match it.
     elements.each(function() {
     var $this = $(this);
     if(currentRowStart != $this.position().top) {
     // we just came to a new row. Set all the heights on the completed row
     for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++)
     setConformingHeight(rowDivs[currentDiv], currentTallest);

     // set the variables for the new row
     rowDivs = []; // empty the array
     currentRowStart = $this.position().top;
     currentTallest = getOriginalHeight($this);
     rowDivs.push($this);
     } else {
     // another div on the current row. Add it to the list and check if it's taller
     rowDivs.push($this);
     currentTallest = (currentTallest < getOriginalHeight($this)) ? (getOriginalHeight($this)) : (currentTallest);
     }
     // do the last row
     for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) 
     setConformingHeight(rowDivs[currentDiv], currentTallest);
     });
}

$(window).resize(function() {
 columnConform();
});

and at the bottom of document:

$(window).load(function() {
columnConform();
});