Ridimensionamento automatico div contenitore

[sharkboy]

Ciao a tutti,
insieme ad un paio di amici ho realizzato un sito web, dedicandomi soprattutto al design css su un idea datami da un grafico che ci sta aiutando.

Il problema che ho è che non riesco a fare in modo che il wrapper centrale si ridimensioni in altezza in base al contenuto.

Questa è la struttura:

container
-> header
---> header_left
---> header_center
---> header_right
-> search
-> wrapper_top
->wrapper
---> wrapper_right
---> wrapper_center
------> wrapper_center_contenuto
---> wrapper_left
-> footer

Questo il foglio di stile:

/* Basics */
body {
background : #FFFFF;
color : #00000;
font : 12px Verdana, Geneva, Arial;
text-align: left;
margin : 0px;
padding-bottom : 0px;
padding-left : 0px;
padding-right : 0px;
padding-top : 0px;


scrollbar-face-color:#82b6de;
scrollbar-highlight-color:#FFFFFF;
scrollbar-3dlight-color:#FFFFFF;
scrollbar-darkshadow-color:#FFFFFF;
scrollbar-shadow-color:FFFFFF;
scrollbar-arrow-color:#FFFFFF;
scrollbar-track-color:#FFFFFF;

}

#container {
background: #FFFFFF;
border-bottom : 0px;
border-left : 0px;
border-right : 0px;
border-top : 0px;
margin : 20px auto !important; margin-left: 215;
width : 776px;




}

#header {
background : #FFFFFF url(../img/header_bk.jpg) no-repeat;
height: 111px;
width: : 100%;
margin: 0px;
padding-bottom : 0px;
padding-left : 0px;
padding-right : 0px;
padding-top : 0px;


}

#header_left {

height : 100%;
float:left;
width:50%;



}


#header_center {

height : 100%;
float:left;
width:48%;



}


#header_right {

height : 100%;
float:left;
width:2%;


}

#search {
background : #FFFFFF url(../img/search_bk.jpg) no-repeat;
height: 46px;
width: 100%;
margin-top: 2px !important; margin-top: -124px;

padding-bottom : 0px;
padding-left : 0px;
padding-right : 0px;
padding-top : 0px;

}

#search_center {
width: 750px;
float:left;
}

#wrapper_top {
background : #FFFFFF url(../img/wrapper_top_bk.jpg) no-repeat;
height: 24px;
width: 100%;
margin-top: 2px !important; margin-top: -10px;
padding-bottom : 0px;
padding-left : 0px;
padding-right : 0px;
padding-top : 0px;
}

#wrapper {
width: 100%;
height: 400px;
margin : 0px;
padding-bottom : 0px;
padding-left : 0px;
padding-right : 0px;
padding-top : 0px;
}

#wrapper_left {
background : #FFFFFF url(../img/wrapper_left_bk.jpg);
height : 100%;
float:left;
width:179px;
}

#wrapper_center {
background : #FFFFFF;
height : 100%;
float:left;
width: 572px;
overflow: auto;


#wrapper_center_contenuto {

height : 90%;
width: 95%;
margin-left: 1%;

}


#wrapper_right {
background : #FFFFFF url(../img/wrapper_right_bk.jpg) no-repeat;
height : 100%;
float:left;
width:25px;
}

#footer {
background : #FFFFFF url(../img/footer_bk.jpg) no-repeat;
height: 79px;
width: 100%;
margin : 0px;
padding-bottom : 0px;
padding-left : 0px;
padding-right : 0px;
padding-top : 0px;
}

Ora che vedete il tutto magari si capisce meglio, io vorrei che in base al contenuto di wrapper_left o wrapper_center wrapper aumenti o meno di dimensione, in modo che la parte centrale definita da me wrapper sia dinamica in altezza in base al contenuto.

Avevo provato a mettere l'altezza auto ma non funziona e avevo fatto altre prove.

Mi sapete aiutare?

Il sito è su www.eticambio.it e deve ancora essere finito in alcune parti!