Question

hey guys hope you can help me out,

I am having a weird problem. I am working on a web page that has two floating divs (among many other things). To make the floating divs of equal height, I added the following code

$(document).ready(function(){

   alert($('#body-left').height());
    if($('#body-left').height()>$('#sidebar').height()){
     $('#sidebar').height($('#body-left').height());

    }
    else{

    $('#body-left').height($('#sidebar').height());

    }

});

see the line “alert($(‘#body-left’).height());”, when I remove that line, it stops working :/. I.e :

this is what happens when I dont add the alert() line:

and this is what happens when I do add the alert line

any ideas why this is happening? :/

---

sorry for the late reply guys, but I got it working using

if($('#body-left').height()>$('#sidebar').height()){
    setTimeout(function(){
     $('#sidebar').height($('#body-left').height());
    },100);

}
else{
    setTimeout(function(){
    $('#body-left').height($('#sidebar').height());
    },100);
}

any ideas?

Answer 1

Using this question as a basis, you can quickly take the max height of any number of elements. If you gave them all the class equalheight, you could do this:

$(document).ready(function() {
    var maxheight = $.map($('.equalheight'), function(val, i) {
        return $(val).height();
    }).max();
    $('.equalheight').height(maxheight);
});

Array.prototype.max = function() {
    return Math.max.apply(Math, this);
};

http://jsfiddle.net/mblase75/NR9TZ/