title: FB-style Menubar on bottom of page gets covered by content
body: <p>I have a horizontal menubar attached to the bottom of my page (like FB has its bar on the top of the page) using</p>
  
  <pre><code>.bottom_menu {position:absolute; bottom:0px; z-index:100}
  </code></pre>
  
  <p>My main content in the page is placed inside a div box positioned absolutely.</p>
  
  <pre><code>.main_content {position:absolute; top:100px; left:75px;right:75px; z-index:100}
  </code></pre>
  
  <p>The problem is that if I have too many lines of content within the tabs, it appears <strong>over</strong> the menubar instead of pushing it to the bottom. </p>
  
  <p>How do I structure this so that <strong>the menubar always stays on the bottom of the screen</strong>, say at least a couple of lines <strong>below the last line of content</strong> inside the main_content div?</p>
  
  <p>Thanks, and apologies in advance if this is a very silly question! :)</p>