jquery to make 2 column height equal only works when alert()

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: enter image description here

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

enter image description here

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?

can I see the relevant HTML and CSS for these elements please? — Ohgodwhy, Jul 12 '12 at 15:34
Have you considered using `display: table-cell` instead of `float: left` for your divs? Doing so will automatically make them the same height (but won't work in IE7). — Blazemonger, Jul 12 '12 at 15:36
I prefer to use `display: table-cell` when appropriate and use an IE7-only stylesheet to add `float: left`. The layout isn't as clean, but I figure that's what they deserve for not upgrading. :-P — Blazemonger, Jul 12 '12 at 15:40
You can also use `Math.max` to simplify your code: `maxheight = Math.max($('#body-left').height(), $('#sidebar').height());` -- and then set the height of both elements to `maxheight`. — Blazemonger, Jul 12 '12 at 15:42
ok sorry for the late reply, I got it to work using the code updated above — Ahmed-Anas, Jul 12 '12 at 16:56

score 1 · Answer 1 · answered Jul 12 '12 at 17:07

If you want equal heights...try this plugin:

$.fn.setMinHeight = function(setCount) {
  for(var i = 0; i < this.length; i+=setCount) {
    var curSet = this.slice(i, i+setCount), 
        height = 0;
    curSet.each(function() { height = Math.max(height, $(this).height()); })
          .css('height', height);
  }
  return this;
};

Copy and paste the above code into a JS file and link to it. Then call it like so...

$(".theItems").setMinHeight(2); // Pass in number of items to include.

Hope this helps.

Michael.

score 1 · Accepted Answer · edited May 23 '17 at 10:30

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/

jquery to make 2 column height equal only works when alert()

2 Answers2