Div che non "vede" il background.

[d.force]

Div che non "vede" il background.

Salve a tutti devo realizzare un sito con il seguente risultato:

http://www.piedicosta.com/esempio.jpg

In pratica si tratta di creare dei div con bordi arrotondati e sottofondo (il fatto che sia semi trasparente non influisce).

Per farlo ho creato il seguente schema:

http://www.piedicosta.com/esempio.jpg

Avrò quindi un div "contenitore_principale" e di seguto:

div "header" con sottofondo l'immagine con i bordi arrotondati (esempio: top.png)
div "center" che contiene la "colonna_destra" e la "colonna_sinistra"
div "bottom" con sottofondo l'immagine con i bordi arrotondati (esempio: bottom.png)

Il problema consiste nel fatto che quando imposto la proprietà "background" ad div "center" quando visualizzo la pagina sul browser, non si vede nessun background.

Per ottenere quello che vedete su http://www.piedicosta.com/esempio.jpg ho dovuto impostare la proprietà "height" al div "center" di 500px.

Ora è chiaro che questa cosa non va bene in quanto il div deve espandersi in base ai contenuti.

questo è il codice della pagina:

<div id="contenitore_principale">

<div id="header"></div>

<div id="center">
    <div id="colonna_sinistra"></div>
    <div id="colonna_destra"></div>
</div> 

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

</div>

e questo è il css:

#contenitore_principale{
width:930px;
padding:0px;
margin:0 auto;
position:relative;
}

#header{
width:930px;
height:21px;
background:   url("../images/riemp-top-content.png") no-repeat center top;
margin:0 auto;
}

#center{
width:930px;
height:500px;
background:   url("../images/riemp-content.png") repeat;
margin:0 auto; 
position:relative;
clear:none;
}


#colonna_sinistra{
width:930px;
float:left;
}


#colonna_destra{
width:230px;
/*background-color:#FF9999;*/
float:right;
padding:0px;
margin:auto;
position:relative;
}

#bottom{
width:930px;
height:21px;
background:   url("../images/riemp-bot-content.png") no-repeat center bottom;
margin:auto;
padding:0;
position:relative;
clear:both;
}

Qualcuno di voi ha una soluzione?
PS. per comodità al posto delle immagini è possibile anche inserire codici dei colori.

Grazie 1000!!!

d-force

[karedas]

Ciao d-force,
dai a "center" un parametro uguale a overflow:hidden; in modo possa sentire i suoi contenuti interni posti in float.

Ciao!

[d.force]

OK provo subito! Grazie Karedas!