$.fn.equalHeight = function () {
    var height = 0,
        reset = $.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) {
            $(this).css("height", height - (h - height));
        }
    });
};

.. works great in Firefox and even the crappy IE6 but not Webkit (Safari, Chrome). How do I fix it?

Many thanks

$.fn.equalHeight = function () {
    var height = 0,
        reset = $.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) {
            $(this).css("height", height - (h - height));
        }
    });
};

.. works great in Firefox and even the crappy IE6 but not Webkit (Safari, Chrome). How do I fix it?

Many thanks

• javascript
• jquery
• browser
• safari
• equals

• Have you looked at this: webkit/blog/66/the-fouc-problem – Pointy Commented Mar 2, 2010 at 15:43
• Equal heights doesn't work in webkit, works in all other browsers. – eozzy Commented Mar 3, 2010 at 3:52
• Same problem here...only Chrome and Safari as you said...the column heights are equal thought, but the content of one column overflow...It looks like it is getting the wrong height as the max height... – Paranoid Android Commented Mar 14, 2011 at 21:38
• Here is a snapshot of mine with the blog feeds overflowing the column...are the blog feeds loaded AFTER the equalHeight() is executed? I call the script in the footer though, with a proper jQuery(document).ready() but it still does not work. awesomescreenshot./0a5987p87 – Paranoid Android Commented Mar 14, 2011 at 21:50

1 Answer 1

Try to load your script with jQuery(window).load(), it solved my problem.

Read more here