.height() returns wrong height of the element.

.height() returns wrong height of the element.

Hi, all.

I have some containers on my page, they are div.seconday_banner_box. Inside them there are the following elements: div.title, div.subtitle, div.text (and some others, which are not interesting for this post).

I need all of the inner elements to be horizontally aligned, this should be achieved through assigning one height to all elements of a type (e.g. the height of the highest element of div.title should be assigned to all other div.title elements. The same with div.subtitle and div.text elements.). 

I wrote a function for the sake of that, the function takes 2 parameters, "container", that's ".secondary_banner_box" in this case and "element" -- that is either ".title", ".subtitle" or "text":

  1. function alterHeights( container, element ) {
  2. var boxes = jQuery(container).length; //count the amount of the .secondary_banner_box containers
  3. var heights = [];
  4. for ( var i = 0; i < boxes; i++ ){
  5. heights[i] = jQuery( '#box_' + (i+1) + ' ' + element ).height(); //get all the heights of elements of type "element". The problem is right here.
  6. }
  7. var max = 0;
  8. for ( i = 0; i < boxes; i++) {
  9. if ( heights[i] > max ) max = heights[i]; //determine the maximum of heights
  10. }
  11. for ( i = 0; i < boxes; i++ ) {
  12. jQuery( '#box_' + (i+1) + ' ' + element ).height(max); //set new heights
  13. }
  14. }
The problem appears at line 10: the returned height is approximately 30%-50% higher than it really is. Even more confusing is that this issue appears not always. Sometimes everything seems to be OK. I did not yet figure out the dependance. 

I've been advised to set "padding:0!important;" to these elements, but it did not make any difference.

I'm very confused on how it can be, that the height returned is wrong...

The page, where you can see the issue is  http://questtravel.ru/?s=африка (please don't be confused by cyrillic symbols).

When you switch the corresponding script off or just switch the assigned "height:XYpx;" of with Firebug or something else, you'll see the actual heights. On this page there are for now just six .secondary_banner_box containers and, for example, for ".title" the highest value has the last one.

And a pair of screenschots: