title: Adding whitespace at bottom of HTML page
body: <p>I am trying to create a website where I have both the title bar and the page footer in fixed positions, i.e. title bar always top and footer always bottom. </p>
  
  <p>This has created issue in that I need to push the content on the page upwards so that the page footer will not overlap the content. 
  I need to add some space to the bottom of the content so that the overlap doesn't occur when a user scrolls to the bottom of the page. 
  I have tried to add a <code>margin-bottom</code> css property to the bottom most DIV so that there should be some space added to the bottom of the page, this worked for the top most DIV using a <code>margin-top</code> css property but not for the bottom.</p>
  
  <p>This is the main structure to my website, without content:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="CONTAINER"&gt;
          &lt;div class="PAGENAVBAR"&gt;
          &lt;/div&gt;
          &lt;div class='CATEGORYNAVBAR'&gt;
          &lt;/div&gt;
          &lt;div class='PAGE_CONTENT'&gt;      
              &lt;div class="LEFTCONTAINER"&gt;
              &lt;/div&gt;
  
              &lt;div class="RIGHTCONTAINER"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="PAGEFOOTER"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>Can someone please suggest a method to achieve this effect?</p>