title: Jquery to resize divs on page load/resize
body: <p>I have the following JQuery that is called whenever the window is resized or on first load. I have some issues with it that it does not seem to work as expected on first load. Could someone please tell me what is malfunctioning?</p>
  
  <h1>JQuery (1.8.3)</h1>
  
  <pre><code>function setContentHeight() {
      var height = $(document).height();
      $('#content, #content &gt; div:first-child').height(height - 242);
      $('#content-text-description').height(height - 280);
  }
  
  $(window).resize(function(e) {
      setContentHeight();
  });
  
  $(document).ready(function(e) {
      setContentHeight();
  });
  </code></pre>
  
  <h1>HTML</h1>
  
  <pre><code>&lt;body&gt;
      &lt;div id="container"&gt;
          &lt;div id="banner"&gt;&lt;/div&gt; &lt;!-- Header --&gt;
          &lt;div id="navi"&gt;&lt;/div&gt; &lt;!-- Navigation Pane --&gt;
          &lt;div id="content"&gt; &lt;!-- Content loaded with include --&gt;
              &lt;div id="home"&gt; &lt;!-- Start of content --&gt;
                  &lt;div id="content-text-description"&gt;&lt;/div&gt; &lt;!-- container for custom scroller --&gt;
              &lt;/div&gt;
          &lt;div id="footer"&gt;&lt;/div&gt; &lt;!-- Footer --&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <h1>CSS</h1>
  
  <pre><code>body {
     margin:0;
     font-family:"Century Gothic";
     line-height:30px;
  }
  
  #container {
      width:1024px;
      margin: 0 auto;
  }
  
  #banner {
      width:1024px;
  }
  
  #content {
      width:1024px;           
      height:470px;
      z-index:98;
      float:left; 
      top:-7px;   
      overflow:hidden;
  }
  
  #footer {
      text-align:center;
      background:#59585D;
      position:absolute;
      bottom:0px;
      width:1024px;
      height:30px;
      font-size:12px;
      color:#ffffff;
  }
  
  #content-text-description {
      padding-top:20px;
      display:block;
      width:800px;
      z-index:3;
      overflow:auto;
  }
  </code></pre>
  
  <p>As far as I know, the JQuery bit should function as expected by resizing the requested divs when the document is loaded or window resized, but it is not.</p>
  
  <p>Is it something I'm doing wrong or is what I'm trying to achieve not possible?</p>