title: dynamically set CSS padding-top
body: <p>I may have to alter the structure of DIVs I am using for my webpage layout.</p>
  
  <p>On <a href="http://www.bibandtucker.net.au/test/" rel="nofollow">this page</a>, I have:</p>
  
  <pre><code>&lt;div id="container_slider"&gt;&lt;/div&gt;
  &lt;div id="container_content"&gt;
    &lt;div id="main"&gt;
      &lt;div id="header"&gt;&lt;/div&gt;
      &lt;div id="content"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;style&gt;
    #container_slider {position: absolute; top: 0; z-index: 1;}
    #container_content {position: absolute: top: 0; z-index: 10;}
    #main {width: 940px; margin: 0 auto;}
    #header {width: 170px; float: left;}
    #content {width: 760px; float: right;}
  &lt;/style&gt;
  </code></pre>
  
  <p>I want #header to display overlaying #container_slider, but I want #content to display vertically beneath #container_slider.</p>
  
  <p>The trouble I have is that the contents of #container_slider is responsive, so the height of #container_slider depends on the browser dimensions.</p>
  
  <p>This means I can't set an accurate padding-top for #content.</p>
  
  <p>Is there a way I can dynamically set #content's padding-top to a value = height(#slider_container) + 10 ?</p>
  
  <p>Or do I need to adjust the way I construct my DIVs?</p>