3 Column CSS Equal Height jQuery solution

Question

Hey, I was working on a solution to my equal height three columns CSS equal height layout with jQuery, because the CSS workarounds were really giving me some trouble.

I came up with the following code:

$('.columns').css("height", "$('#detail').height()");

But for some reason, I don't see any effect when I reload my web page.

I even tried waiting nesting it in a (window).load() event handler instead of the (document).ready() just to test it out.

I was wondering if it's not possible to set the CSS property of an element as a jQuery statement or something like that.

Or, is it because my height for my <div id="#detail> is not set at all.

I also tried setting #detail to height: auto; but this did not work either.

Please tell me if this is an impossible workaround I'm trying to find here, but hopefully why! :)

Answer 1

Set overflow: hidden; on your #detail div. Also, jQuery's .height() returns a number. CSS requires us to put px at the end. This should work for you.

$('.columns').css('height', $('#detail').height() + 'px');