Uitrekbare content, met een plakkerige footer

Ik heb een siteje gemaakt op http://www.goblinwar.nl/test/.
Dan zie je dat de footer niet onder de content/menu komt, wat heel jammer is.
Als je nu naar faq zou gaan zie je dat de pagina nu een heel stuk langer is, ook daar zou de footer dan onder de uitgerekte content moeten komen.

Ik had de content/menu/header al in 1 container gezet om dan die uit te laten rekken en dat dan daar de footer onder kon.
Helaas was dat niet gelukt.

Het is niet de bedoeling dat de footer aan de onderkant van de browser blijft plakken.(wat ik alleen maar heb gevonden op de zoektocht
naar de oplossing van mijn probleem, maar dat de footer ten alle tijden onder de container div wordt geplakt

Indien je niet weet wat ik precies wil, kijk dan nog even hier: http://goblinwar.nl/layoutschets.jpg voor een schets ervan

Code van index.php

 <div id="container">
        <div id='bovenrand'>
        </div>
         
        <div id="header">
        </div>
       
        <div id="menu">

        </div>
         
        <div id="content">

        </div>

    </div>
   
    <div id="footer">
    </div>

Css code:

  html
{
	height: 100%;
}

* html #container
{
	height: 100%;
}
/*
* 
{
	margin: 0px;
	padding: 0px;
}*/

/*Begin eigen code */
body
{
	height: 100%;	
	background-color:#c9ddc2;
	font-size:14px;
	font-family:calibri;
	color:#d4af37;
}

/* Begin indeling van het middenstuk(scherm)*/
#bovenrand
{
	top:0px;
	height:5px;
	width:800px;
	background-color:#c9ddc2;
}

#header
{
	position:absolute;
	padding:0px;
	margin-right:150px;
	top: 5px;
	text-align:center;
	height: 200px;
	width:800px;
	background-color:#c9ddc2;
	background-image:url(../img/header.jpg);
	background-repeat:no-repeat;
}

#gsbalk
{
	position:absolute;
	top:170px;
	height:30px;
	min-width:200px;
	margin-left:300px;
	/*background-color:#054109;*/
}

#lijnonderheader
{
	position:absolute;
	height:22px;
	width:800px;
	top:195px;
	visibility:visible;
}

#menu
{
	position:absolute;
	background-color:#054109;
	top:213px;
	width:200px;
	min-height:392px;
}

#content
{
	position:absolute;
	top:205px;
	margin-left:200px;
	background-color:#054109;/*#0d5507;*/
	width:565px;
	min-height:400px;
	padding-left:35px;
}

#container 
{
	position:relative;
	width:800px;
	padding-bottom:60px;
	min-height: 100%;
	min-height:600px;
	background-color:#054109;
}

#footer
{
	/*position:relative;*/
	width:800px;
	height:60px;	
	background-image:url(../img/footer.jpg);
	background-repeat:no-repeat;	
	
}