title: jQuery: Why does .width() sometimes return 0 after inserting elements with .html()?
body: <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>