Question

I have a sidebar and content area, each with an unique background colour. They both float so I am unable to get the 2 to be the same size so that they can spread all the way to the bottom. I figured with jQuery I could determine each columns height, then autosize the other column so that they are the same height, but my script returns the value in px’s so I cannot do a direct comparison.

Is there another, maybe better way, you can advise me?

// Sample code:
var left_bar = $("#left_bar").css("height");
var content_area = $("#content_area").css("height");
if(left_bar > content_area) {
    $("#content_area").attr("height",left_bar);
} else {
    $("#sidebar").attr("height",content_area);
}

Answer 1

You should use .height() instead of attr('height', left_bar) – this will give you a number value.

var a = $('#left_bar'), b = $('#content_area');

if (a.height() > b.height()) {
 b.height(a.height()); 
} else {
 a.height(b.height()); 
}

Demo: http://jsbin.com/olopuy/1/edit

You may also be able to get what you want without any JS; see http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks