jQuery: Why does .width() sometimes return 0 after inserting elements with .html()?
<p>I am getting some html and inserting it with <code>.html()</code>, after which I am trying to get the width of one of newly inserted elements with <code>.width()</code> (which has a CSS rule). However <em>sometimes</em> - the width is not picked up, and is returned as 0.</p>

<p>Is it because JS runs "ahead" of newly created elements and their css? I have tried chaining with <code>.html('...').find('...').width()</code> but it still sometimes does not work. What's the reason and is there a work around?</p>

<p><strong>Edit:</strong> By popular demand, EXAMPLE:</p>

<pre><code>/* ajax.response is:
    &lt;div class="boxes"&gt;
        &lt;div class="box width-A"&gt;test 1&lt;/div&gt;
        &lt;div class="box width-B"&gt;test 2&lt;/div&gt;
        &lt;div class="box width-C"&gt;test 3&lt;/div&gt;
    &lt;/div&gt; */

var boxOutput = $('.boxOutput'); /* .boxOutput is already on the page */
boxOutput.html(ajax.response);

// make width of ".boxes" equal to the sum of all ".box"

var boxWidth = 0;
$('.box', boxOutput).each(function(i) {
    boxWidth += $(this).width(); /* this is where sometimes width returns 0 */
});
$('.boxes', boxOutput).css('width', boxWidth);
</code></pre>

<p>My original code is too long/ugly to copy/paste, but this is a simplified exact thing I am doing (Sorry if there's a silly mistake somewhere, it's too late where I am :P). After getting html back from ajax, putting it into a div, I want to get width of each box (because it might be different), and then use that width. Again, 90% of the time, the width is returned correctly. It's those 10% when sometimes width is 0 :(</p>
