css - jQuery height() returns 0 on a visible div - why?

Question

I have a container (thetext1) with a set height of 360px. "thetext1" contains two divs - one on the left and one floated to the right - into both of which content is delivered through an ajax call.

There will be times when the content in one or other of these divs exceeds 360px and so I want to increase the height of thetext1 accordingly.

My test code

newhgt = $('#thetext1').find('div.rhs').css("background", "pink").height();

returns 0 - (my selector is correct as the targeted div is perfectly pink!).

Why is this? I know - from answers to previous posts on this site - that the solution is to add overflow: hidden thetext1, but I would like to understand why my attempt to get the height of the rhs and lhs div is failing.

question from:https://stackoverflow.com/questions/9292529/jquery-height-returns-0-on-a-visible-div-why

Answer 1

Make sure the code is inside the $(window).load [not $(document).ready ]

$(window).load(function () {
    newhgt = $('#thetext1').find('div.rhs').css("background", "pink").height();
});