Equal height columns jQuery not working in webkit browsers
<p>I tried to use both of these two solutions</p>

<p>1)</p>

<pre><code>jQuery.fn.equalHeights = function() { 
return this.height(Math.max.apply(null, 
this.map(function() { 
return jQuery(this).height() 
}).get() 
)); 
}; 
</code></pre>

<p>2)</p>

<pre><code>jQuery.fn.equalHeights = function () {
var height = 0,
reset = jQuery.browser.msie ? "1%" : "auto";
return this.css("height", reset).each(function () {
height = Math.max(height, this.offsetHeight);
}).css("height", height).each(function () {
    var h = this.offsetHeight;
    if (h &gt; height) {
        jQuery(this).css("height", height - (h - height));
    }
});
};
</code></pre>

<p>to have equal height columns, but I have problems in webkit browsers only.</p>

<p>Here is a <a href="http://awesomescreenshot.com/0a5987p87" rel="nofollow">screenshot</a>, with the content of the left column overflowing. The columns have actually the same height, but they are all too short...</p>

<p>This is my jQuery call, in the footer:</p>

<pre><code>jQuery(document).ready(

function() {

//Equal columns
jQuery('#center_column, #right_column,#left_column').equalHeights();
}
);
</code></pre>

<p>It looks like it is executed before the DOM is completely ready for some reason...</p>

<p>Any suggestion?</p>
