jQuery height() returning false values

Question

I'm trying to use jQuery to set the height of several divs to all be the same height as the tallest div. Basically I loop through the divs and get the height from each of them, storing the largest one in a variable. Then I loop through all of them again and set their height to the variable.

However, jQuery is giving me the wrong value for the height. For example, the height() function for the first div returns 633, but when I look at it in the inspector it says that it is 603. I have absolutely no idea why it's doing this. It seems to be including the padding and margins, but the documentation says it shouldn't be doing that.

The height for the divs is set as auto in my stylesheet. If I give them a fixed pixel height then the jQuery height() function returns the correct value, but not when they are on auto (as they need to be).

The site in question is ictsf.org. Notice the extra space at the bottom of the three columns.

Answer 1

Maybe you are looking for this: http://api.jquery.com/outerHeight/

Answer 2

The problem is related to your "equalize column height" code running on $(document).ready(), which happens before WebKit is aware of the height of your images.

So, the quickest fix is to instead run the code on $(window).load(). Or, even better, use the imagesLoaded plugin.

Alternatively, setting the height attribute on the imgs might fix the problem.