Equal height columns jQuery not working in webkit browsers

I trie开发者_如何学JAVAd to use both of these two solutions

1)

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

2)

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 > height) {
        jQuery(this).css("height", height - (h - height));
    }
});
};

to have equal height columns, but I have problems in webkit browsers only.

Here is a screenshot, with the content of the left column overflowing. The columns have actually the same height, but they are all too short...

This is my jQuery call, in the footer:

jQuery(document).ready(

function() {

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

It looks like it is executed before the DOM is completely ready for some reason...

Any suggestion?

I've had problems in the past with Webkit browsers not being able to see the image dimensions until after the document.ready event. To get around this, you can specify the height and width in the tag:

<img src="foo.jpg" alt="Foo" width="500" height="500" />

And if that doesn't work, you might find you need to do a little bit of a hack, using the window.load event rather than $(document).ready.