title: Setting margin-top of one element to the height of another element using JQuery
body: <p>I'm trying to have a header at the top with a non-fixed height but a fixed position, and below that a content area. Now, I simply added a fixed padding-top to the element so the content would show below the header. I'm trying to do this using JavaScript and JQuery. I think the way I did it would be the best way, but it doesn't quite work.</p>
  
  <p>[HTML]</p>
  
  <pre><code>&lt;div class="contentPage" id="page_1" name="templates"&gt;
      &lt;div class="contentPageHeader"&gt;
          &lt;a href="#menu"&gt;
              &lt;div class="pageBack"&gt;
                  &lt;h4&gt;Back&lt;/h4&gt;
              &lt;/div&gt;
          &lt;/a&gt;
  
          &lt;h3&gt;Templates&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="contentPageContent"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>[JS]</p>
  
  <pre><code>var headerHeight = $('.contentPageHeader').css( 'height' );
  $('contentPageHeader').css('margin-top', headerHeight);
  </code></pre>
  
  <p>For a full demo visit this <a href="https://jsfiddle.net/mdeujc0u/1/" rel="nofollow">JSfiddle</a></p>