I am new with CSS and need some help, please. Although it seems to be simple to solve, I am already working in this problem for about 4 hours. I found many similar questions on internet, but each case is particulary different from mine, and the "solutions" can't solve my problem (already tried most of them).

Here is the basic structure of my html page:

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
    <title>Test</title>
</head>
<body>

    <div id="main">

        <div id="head">
            <div id="head_content">
                HEARDER
            </div>
        </div>

        <div id="body">

            <div id="menu">
                MENU
            </div>

            <div id="page">
                PAGE CONTENT
            </div>

        </div>

        <div id="foot">
            <div id="foot_content">
                FOOTER
            </div>
        </div>

    </div>

</body>
</html>

```

And here is the CSS I am trying to implement:

```
html {
    height: 100%;
}

body {
    margin:0;
    padding:0;
    width:100%;
    height: 100%;
    min-height: 100%;
    background: #DEDEDE;
}

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

#head {
    width: 100%;
    height: 58px;
    border-bottom: 1px solid #115293;
    background-color: #1976D2;
}

#head #head_content {
    width: 1000px;
    padding: 6px;
    color: #FFFFFF;
    margin: 0 auto;
    text-align: center;
}

#body {
    width: 1000px;
//    height: 100%;
//    min-height: 100%;
    margin: 0 auto;
//    padding-bottom: 50px;
    border-left: 1px solid #BFBFBF;
    border-right: 1px solid #BFBFBF;
}

#body #menu {
    float: left;
    width: 220px;
//    height: 100%;
//    min-height: 100%;
    background-color: #94C9FF;
}

#body #page {
    overflow: hidden;
//    height: 100%;
//    min-height: 100%;
    padding: 10px;
    color: #5C5C5C;
    border-left: 1px solid #BFBFBF;
    background-color: #FFFFFF;
}

#foot {
    position:absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 58px;
    color: #FFFFFF;
    border-top: 1px solid #115293;
    background-color: #1976D2;
}

#foot #foot_content {
    position: relative;
    width: 1000px;
    padding: 6px;
    margin: 0 auto;
    text-align: center;
}

```

Obs: Commented lines are SOME of the solutions I already tried.

Here is what I got so far:

[![enter image description here](https://i.stack.imgur.com/qABpQ.png)](https://i.stack.imgur.com/qABpQ.png)

And finally here is what I really need:

[![enter image description here](https://i.stack.imgur.com/HUIVi.png)](https://i.stack.imgur.com/HUIVi.png)