title: Make footer DIV stay bottom after AJAX content load
body: <p>I'm having problems making the footer DIV move to the bottom of the page after inserting content into the above DIV using AJAX.
  So initially when page loads the footer DIV is at bottom page page, but after the AJAX inserts lots of content into the above DIV, the footer just stays there and does not update itself and moves to the bottom.</p>
  
  <p>Anyone knows how to fix this? I'm using jQUERY to insert AJAX content after  page onload.</p>
  
  <p>I already tried using position:absolute; bottom:0; left:0 on the footer div, but still stays there after AJAX call.</p>
  
  <p>Thanks in advance.</p>
  
  <pre><code>&lt;body style="width:100%; height:100%;" onload="displayContent()"&gt;
      &lt;div id="main" style="width:100%; height:100%;" &gt;
          &lt;div id="header" style="width:100%; height:10%;"&gt;
              &lt;div style="width:100%; height:100%;"&gt;
                  &lt;div  style="display:inline; float:left; width:10%; height:100%;"&gt;Logo&lt;/div&gt;
                  &lt;div  style=" display:inline; float:right; width:90%; height:100%;"&gt;Navigation Links&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div style="width:100%; height:5%;"&gt;
              Navigation links go here
          &lt;/div&gt;
          &lt;div id="body" style="width:100%; height:75%;"&gt;
              &lt;div id="content" style="display:inline; float:left; width:70%; height:100%;"&gt;Main content from AJAX call after page onload goes here&lt;/div&gt;
              &lt;div  style="display:inline; float:right; width:30%; height:100%; background:red;"&gt;Other stuff here&lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="footer" style="width:100%; height:10%;"&gt;
              FOOTER NEEDS TO UPDATE ITSELF AFTER AJAX CALL
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>