JQuery returns a height of 0 for a div element immediately after adding an element

Question

I have a floating div that initially has no content. I use jQuery to add a set of elements to a div, and then immediately call the height method of the original div. The elements that I add have a certain minimum height in the stylesheet, but the floating div is not. The problem is that when I name the height on the original div, I get 0.

If I use setTimeout to delay the call even for 1 millisecond, I get the correct height. My theory is that when I call the height method, the browser has not yet completed the transfer of changes to the DOM, so it has not installed hei yet? Ht of the top level item. This height will vary, so there will be no use of a fixed height. Does anyone know what might cause this problem?

Answer 1

This should depend on the size of the dom. If its big there will be a slight delay.

Answer 2

If all else fails, you can temporarily consider the deferred .then () function. Here is an example using jsFiddle: http://jsfiddle.net/yTTRq/