Dave Dash2012-01-17T21:54:19-08:00http://davedash.com/Dave Dashdd+atom1@davedash.comEqual height columns with jQuery2007-05-22T00:00:00-07:00http://davedash.com/2007/05/22/equal-height-columns-with-jquery<p>[tags]css, jQuery, layout, javascript, equal, columns, equal columns[/tags]</p>
<p>I've seen a few examples of how to equalize column heights using javascript, and none of them seem appealing:</p>
<ul>
<li><a href="http://www.tomdeater.com/jquery/equalize_columns/">jquery.equalizecols.js</a>
<ul>
<li>This required a few other libraries, and I wanted more flexibility (e.g. where the column should grow in order to equalize)</li>
</ul>
</li>
<li><a href="http://www.projectseven.com/tutorials/css/pvii_columns/index.htm">Project 7</a>
<ul>
<li>The Project 7 approach was the most interesting, but the code seemed a bit messy and not so open source friendly (even thought it might have been). It would let you specify which element was to grow inside a column.</li>
</ul>
</li>
<li><a href="http://www.html.it/articoli/nifty/index.html">Nifty Corners</a>
<ul>
<li>I had trouble with the syntax, but I liked how it just created a new element out of thin air...</li>
</ul>
</li>
</ul>
<p>So I wrote my own:</p>
<pre><code>$("#col1, #col2").equalizeCols();
</code></pre>
<p>will equalize the columns as expected</p>
<pre><code>$("#col1, #col2").equalizeCols("p,p");
</code></pre>
<p>will equalize the columns and add the extra space after the <code>p</code> tag in <code>#col1</code> or <code>#col2</code> (whichever is shorter).</p>
<p>Here's our function:</p>
<div><textarea name="code" class="js">
(function($) {
$.fn.equalizeCols = function(children){
var child = Array(0);
if (children) child = children.split(",");
var maxH = 0;
this.each(
function(i)
{
if (this.offsetHeight>maxH) maxH = this.offsetHeight;
}
).css("height", "auto").each(
function(i)
{
var gap = maxH-this.offsetHeight;
if (gap > 0)
{
t = document.createElement('div');
$(t).attr("class","fill").css("height",gap+"px");
if (child.length > i)
{
$(this).find(child[i]).children(':last-child').after(t);
}
else
{
$(this).children(':last-child').after(t);
}
}
}
);
}
})(jQuery);
</textarea></div>
<p>This requires jQuery of course, and it hasn't been tested much.</p>