title: jQuery getting height of div returns 0
body: <p>i have a jquery html object:</p>
  
  <pre><code>var $header = $('&lt;div id="print-header" class="print-header" style="width: ' + this.previewWidth + 'px; min-height: 190px;"&gt;&lt;/div&gt;');
  </code></pre>
  
  <p>When I output it with <code>console.log($header);</code> I can see the object.</p>
  
  <p>Now after that comes a for loop that appends elements, with a <code>float: left</code> on them to the <code>$header</code> object</p>
  
  <pre><code>for(var i = 0; i &lt; $form.length; i++){
    var $widget = $form[i];
  
    var wHtml = '&lt;div class="element" style="width: ' + $widget.size_x*10 + '%; height: ' + $widget.size_y*10 + '%; float: left;"&gt;';
    switch($widget.widget_name){
      case "textFieldWidget":
        wHtml += '&lt;div style="border-bottom: 2px dotted; width: 100%; height: 30px; margin: 5px;"&gt;&lt;span style="position: relative; font-size: 11px; font-style: italic; color: #999; top: 16; left: 10;"&gt;' + $widget.name + '&lt;/span&gt;&lt;/div&gt;';
      break;
      ...
      case "imageWidget":
        wHtml += '&lt;div style="margin: 5px;"&gt;&lt;img src="' + $widget.options[0].value + '" style="width: 100%; height: 100%;"&gt;&lt;/div&gt;';
      break;
    }
    wHtml += '&lt;/div&gt;';
  
    if($widget.section == 0){
      $header.append(wHtml);
    }
    ...
  }
  </code></pre>
  
  <p>During the loop, when the element has been appended, I append a clearfix to the <code>$header</code></p>
  
  <pre><code>$header.append('&lt;div class="clear" style="clear: both;"&gt;&lt;/div&gt;');
  </code></pre>
  
  <p>At this point I need to calculate the <code>$header</code> height to do some further processing and this is the part where I'm stuck. No matter whether I use <code>.height()</code>, <code>.outerHeight()</code>, <code>.innerHeight()</code> or <code>.prop("scrollHeight")</code>, the height is always returned 0.</p>
  
  <pre><code>console.log($header); // returns the $header object
  console.log("Normal: " + $header.height()); // returns 0
  console.log("Outer: " + $header.outerHeight()); // returns 0
  console.log("Inner: " + $header.innerHeight()); // returns 0
  console.log("Scroll: " + $header.prop("scrollHeight")); // returns 0
  </code></pre>
  
  <p>I have tried using <code>$(window).load()</code>, that didn't work. The div is visible (<code>display: block;</code>). I also tried adding <code>overflow: hidden;</code>, that didn't work aswell</p>