FB-style Menubar on bottom of page gets covered by content

Question

I have a horizontal menubar attached to the bottom of my page (like FB has its bar on the top of the page) using

.bottom_menu {position:absolute; bottom:0px; z-index:100}

My main content in the page is placed inside a div box positioned absolutely.

.main_content {position:absolute; top:100px; left:75px;right:75px; z-index:100}

The problem is that if I have too many lines of content within the tabs, it appears over the menubar instead of pushing it to the bottom.

How do I structure this so that the menubar always stays on the bottom of the screen, say at least a couple of lines below the last line of content inside the main_content div?

Thanks, and apologies in advance if this is a very silly question! :)

Answer 1

create a container for footer menu and content section like this:

<div class="container">
    <div class="content">

    </div>
    <ul>
        <li>MENU</li>
        <li>MENU</li>
        <li>MENU</li>
        <li>MENU</li>
    </ul>  
</div>

then set position of container relative and position of menu to absolute. set padding-bottom for container as height as menu for prevent content to cover menu.

content will increase height of container and footer menu will be bottom of container all time.

here is demo

CSS

 ul, body, htnl{
     padding:0;
    margin:0;
 }
li{
    list-style:none;
    float:left;
    margin-left:10px;
}
div.container{
    position:relative;
    min-height:30px;
    background:#eee;
    padding-bottom:50px;
}
ul{
    position:absolute;
    bottom:0;
    height:50px;
    width:100%;
    background:#aaa;
}