Footer is displayed over content. I need it always on the bottom of the page

I am new to CSS and HTML, and I'm trying to create a simple HTML page.

So about the implementation : I have a main div called container with relative positioning. Inside this main div, I have 3 more div's: header- positioned absolute with top: 0px, menu- also absolute, footer- absolute with bottom: 0px. My main problem is about the content div which is placed between menu div and the footer. If this content div has much information, its height becomes larger than the main div(container), and the footer is displayed over the information from the content div.

I tried to not give a positioning and place under the menu div with padding-top, but then the last 2-3 lines are lost under the footer. I should say that a sticky footer is not what I'm looking for. I need another solution.

This the HTML:

<body>
        <!-- CONTAINER -->
        <div id="container">
            <!--HEADER-->
            <div id="header" >
                <p>Header</p>
            </div>
            <div id="menu" >
                <ul>
                    <li>Menu Item 1</li>
                    <li>Menu Item 2</li>
                    <li>Menu Item 3</li>
                    <li>Menu Item 4</li>
                    <li>Menu Item 5</li>
                </ul>
            </div>
            <!-- Problematic div -->
            <div id="content"> // simulate large amount of information
                <h1> Content</h1>
                <h1> Content</h1>
                <h1> Content</h1>
                <h1> Content</h1>
                <h1> Content</h1>
                <h1> Content</h1>
                <h1> Content</h1>
                <h1> Content</h1>
                <h1> Content</h1>
                <h1> Content</h1>
                <h1> Content</h1>
                <h1> Content</h1>
                <h1> Content</h1>
            </div>
            <div id="footer">
                <p> Footer </p>
            </div>
        </div>
    </body>

and CSS:

html,
body {
   margin:0;
   padding:0;
   height:100%;
}

#container{
    position : relative;
    min-height:100%;
}

#header{
    top : 0px;
    position : absolute;
    width : 100%;
    height : 100px;
    background-color: red;
}

#header p{
    position : absolute;
    top : 39px;
}


#menu{
    position : absolute;
    top : 100px;
    width: 100%;
    background-color: yellow;
    overflow: auto;
    white-space:nowrap;
}

#menu ul{
    margin : 0px;
    padding-left: 20px;
    list-style-type: none;
}
 #menu li{
    display : inline-block;
    padding-right: 150px;
    border-style : 1px solid;
 }

 #content{
    /*
    padding-top : 121px;
    */
    position: absolute;
    top : 120px;
    width : 100%;
    background-color: green;
 }

 #footer{
    position: absolute;
    width: 100%;
    height : 60px;
    background-color:grey;
    bottom : 0px;
 }

Sorry for the long post. I just tried to explain the problem as best as possible. Thanks a lot.

Solution

To fix without modifying the HTML, apply display: inline-block; to #content and #footer, remove positioning, and add padding-top: 121px; back onto #content: http://jsfiddle.net/a2jJC/2/

#content {
    padding-top : 121px;
    width : 100%;
    background-color: green;
    display: inline-block;
}
#footer {
    width: 100%;
    height : 60px;
    background-color:grey;
    display: inline-block;
}