jQuery returns height of 0 for div element immediately after appending element

Question

I have a floating div that initially has no content. I use jQuery to append a set of elements to the div, and then immediately call the height method of the original div. The elements I am adding have a defined min-height in the stylesheet, while the floating div does not. The problem is that when I call height on the original div, I get 0.

If I use setTimeout to delay the call for even 1 millisecond, I get the proper height. My theory is that when I call the height method, the browser has not yet finished rendering the change to the DOM, so it hasn't yet set the hei?ht of the top level element. This height will vary, so using a fixed height is out. Does anyone know what might be causing this problem?

Answer 1

This should depend on the size of dom. If its large there will be slight delays.

Answer 2

If nothing works out then you may temporarily want to consider the deferred.then() function. Here s an example using jsFiddle: http://jsfiddle.net/yTTRq/