JQuery, height of div wrongly recognized due to images content

Question

I have two divs (DivLeft, DivRight) next to each other, they are wrapped in DivHolder. DivRight contains another divs and thus expand in height. I want the DivLeft to have min-height same as DivRight has.

HTML looks more or less like this:

<div class="DivHolder">
   <div class="DivLeft"></div>
   <div class="DivRight">
      <div class="add1"></div>
      <div class="add2"><img ...></div>
      <div class="add3"><img ...></div>
      ....
   </div>
</div>

Tried this script

$(document).ready(function () {
if ($(".DivHolder").length > 0) {

         $(".DivLeft").css("minHeight", $(".DivRight").height());
    }
}

and it append some height to DivLeft, but a wrong one. I checked the height of DivRight, and it is 720px, but the min-height DivLeft gain is 241px. No div that is contained in DivRight is of this height. It seems to be a "random" value. Anyone see the problem?

Thanks!

EDIT: I have found the root of the problem is that some of the divs that are included in DivRight contains images. These images are not loaded when I call my function and thus DivRight appears to be shorter.

I changed $(document).ready(function () for $(window).load(function() {, but now I can see the DivLeft jumps in height (at first its original height is set and after the images are loaded, it extends). That looks bad. Any tips how to improve it?

http://stackoverflow.com/questions/2619813/jquery-equal-height-divs ? If you mean equal height ? — l2aelba, Nov 13 '13 at 11:45
The problem is caused by images included in divs in DivRight. Please, read EDIT. — Very Curious, Nov 13 '13 at 12:12

l2aelba · Answer 1 · 2013-11-13T11:57:03.073

2

In your case...

$('.DivLeft').css('min-height', $('.DivRight').height());

Demo : http://jsfiddle.net/tE6ER/

Or something like.. (Equal Height)

$('.DivLeft, .DivRight').height(
        Math.max(
            $('.DivLeft').height(),
            $('.DivRight').height()
        )
);

Demo : http://jsfiddle.net/2WPwu/

edited Nov 13 '13 at 11:57

answered Nov 13 '13 at 11:50

l2aelba

21,591
22
102
138

score 0 · Accepted Answer · answered Nov 13 '13 at 12:46

0

I solved the problem usign this:

 if ($(".DivHolder").length > 0) {
    $(".DivRight").find("img").load(function (){
       $(".DivLeft").css("minHeight", $(".DivRight").height());
    });
 }

No jumping can be seen, works nicely!

answered Nov 13 '13 at 12:46

Very Curious

881
3
26
50

I have just found, that Chrome doesn't care whether the image is loaded, not even if it is in $(document).ready(function (). Thus after clicking to a link, where this function is loaded, it doesn't work. I solved it by setting images the height firstly. – Very Curious Nov 19 '13 at 10:06

JQuery, height of div wrongly recognized due to images content

2 Answers2