My footer div overlaps my other divs when scaling window

Hi!
Trying to get better at more flexible CSS with % and such!
I got my divs at fairly right positions I just have a problem when scaling:
My footer wont stop when it hits the mainframe div!

My divs are as follow:

Container
Header
</div>
Mainframe
Menu and other divs structuring the mainframe content
</div>
</div>
Footer
</div>
</div>

If my mainframe would contain paragraphs etc it would work but my height: auto doesnt seem to consider the divs as content and therefore makes the mainframe almost nonexistent. And height: 100% makes the mainfram go al the way down below the footer and even the window so you can scroll to se its bottom border!

Al I want is that the mainframe existing between footer and header and block the scaling!

Suggestions would be greatful!!
The site is www.cjsylvan.se

The main css is:

html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:gray;
font-family:arial,sans-serif;
font-size:small;
color:#666;
}

div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:750px;
background:#f0f0f0;
height:auto% !important;
height:100%;/* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}

div#header{
padding:1em;
border-bottom:6px double gray;
}

div#mainframe{
padding-bottom:2em;
border-bottom:4px solid #666666;
height:100%;
min-height:100%;
}

div#menuframe{
position:relative;
width:23%;
min-width:80px;
float:left;
height:40%;
min-height:100px;
display:inline;
border-right:4px solid #666666;
border-bottom:4px solid #666666;
}

div#topframe{
position:relative;
height:55%;
width:74%;
float:left;
display:inline;
}

div#extraframe{
position:relative;
float:left;
width:23%;
height:30%;
}

div#bottomframe{
position:relative;
width:74%;
height:30%;
float:left;
display:inline;
overflow:hidden;
border-top:4px solid #666666;
border-left:4px solid #666666;
margin-left:1em;
}

div#footer{
position:absolute;
width:100%;
bottom:0;
height:30px;
border-top:6px double gray;
clear:both;
}


THANK YOU!!!

 

Try using min-height and min-width so the page can only be reduce to the min size.

 

Thanks for replying!
I have however tried that! At least on the mainframe which should be enough right? I have however only used % i think so I will try px or em now.

I still dont understand why the mainframe jumps down below footer, I changed it to 80% and it landed perfekt by the footer!!!

 

Try to remove absolute positioning from #footer.