Ciao a tutti.
Ho un problema con un allineamento in altezza.
spiego in breve la struttura:
il center e l'esterno mi servono per definire le barre laterali come img di sfondo.
la struttura la da il container <-- box principale
corpo contiene la parte dx (la barra di navigazione) e il corpo della pagina
sotto ho il footer. infine chiudo il container e gli altri 2 div
Come posso fare affinhce la pagina si estenda al 100% in altezza, e mantenga la struttura?

css:
/* CSS HOME PAGE */
#center {
margin:auto;
width:814px;
height:100%;
}


#esterno{
background-image: url(../img/sfondo_esterno.jpg);
background-repeat: repeat-y;
width:814px;
height:100%;
margin-left:auto;
margin-right:auto;
float:left;
}

#container{
position:relative;
width:800px;
margin:auto;
height:100%;
text-align:left;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #FFFFFF;
background-image: url(../img/sf_div.jpg);
background-repeat: repeat;
}

#header {
height:144px;
width:100%;
}

#corpo {
width:800px;
height:100%;
float:left;
margin-left:auto;
margin-right:auto;
}

#corpo_sinistra
{
padding-top:10px;
width:550px;
float:left;
background-color: #FFFFFF;
padding-bottom: 10px;
}

#navigation_dx {
float:left;
width:250px;
margin-top:-6px;
text-align:left;
background-color:#006633;
padding: 0px;
height:100%;
}

#footer {
color:#333333;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
background-color: #FFFFFF;
font-weight: bold;
text-align:right;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #000000;
width:795px;
float:left;
padding-top:25px;
padding-bottom:3px;
padding-right:5px;
position:absolute;
bottom:0px;
left:0px;
height:30px;
}


struttura:
<body>
<div id="center">
<div id="esterno">
<div id="container">
<div id="header"></div>

<div id ="corpo">
<div id="corpo_sinistra"> </div>
<div id="navigation_dx"></div>

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


Grazie mille! Spero in un vostro aiuto