Centrare div multipli

[catsniffer]

Salve,avrei un probelam con dei div. Devo allineare 3 contenitore dentro un div centrato in un altro div Cercherò di spiegarmi meglio con del codice:

#cento { 
width: 100%; 	
height: 150px; 	
background-image:url(images/header.jpg); 	
padding: 30px; 
}

#centro{
margin: auto;
overflow: hidden; 
}

.box{
width: 250px;
padding-left: 25px;
padding-right: 25px;
float: left;
text-align: left;
}

Questo è il CSS, mentre per quanto riguarda l'html:

<div id="cento">
<div id="centro>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>

Il problema è che nonostante il div centro sia centrato (scusate il gioco di parole) e i 3 div messi in float dovrebbero occupare una larghezza di 750px totali, non sono mai ben centrati, inoltre se provo ad esempio a farli di 300px uno me lo ritrovo sotto! Qualcuno sa darmi una mano?

[catsniffer]

Aggiungo un piccolo dettaglio: non mi interessa del div centro, il risultato che voglio ottenere è avere quei 3 div esattamente al centro del div cento. però l'uni soluzione che ho trovato per ora è quella.

[FedericoC]

Se vuoi mantenere questa struttura di DIV modifica il CSS così:

#centro{
margin: auto;
overflow: hidden;
display: table;
}

[catsniffer]

Così è perfetto,grazie!
A cosa serve la proprietà display: table; ?

[FedericoC]

In pratica il tuo div è come se diventyasse un TABLE, ovvero occuperà la dimenzione massima dei suoi elementi all'interno (oovero i 3 div) e potrà anche essere centrato...

Mentre il DIV di default è un display: block; ovvero occuperà tutta la riga indipendentemente dallo spazio occupato.

Giusto per fare un esempio veloce:

#cento {
width: 100%;


Se togli il width non camberà niente perchè di defualt ha già il 100%...

[catsniffer]

perfetto ho capito grazie ancora!
Unica cosa: con firefox va alla perfezione, ma IE non centra i div e non mi considera il margin che ho dato agli elementi, come posso risolvere?

[FedericoC]

Uhhh IE 8 non supporta il table, mentre con il 9 funziona...


anziche display: table metti:

width: 900px;


Però con questo modo devi ricordati di modificare la size se in futuro cambierai la dimenzione dei 3 div (padding inclusi)...

[catsniffer]

come mai 900 se i 3 div sommati ne danno 750?
Nel calcolo del width, devo considerarci anche i margini ed i padding?
Scusa ti sto tartassando
Ie fa proprio schifo purtroppo!

[FedericoC]

Si, la dimensione totale è data da Width + Margin + Padding..


Per quanto riguarda IE per fortuna dalla 9 ha fatto grandissimi passi in avanti e dalla versione 10 non avrà niente da invidiare agli altri (secondo me già dalla 9, ma adesso sto andando offtopic )

[catsniffer]

ora va,grazie. però rimane comunque un problema: non mi prende ne il padding ne il margine inferiore,come mai?