centrare div affiancati con float

[luigi.84]

ho un problema con dei box, praticamente ho un contenitore al cui interno ci sono 4 box affiancati con float: left, io vorrei che fossero centrati rispetto alla pagina ma non riesco a smuoverli dalla sinistra, ho cercato nel forum e ho visto che dovrei utilizzare text-align e margin: 0 auto (per andare bene con firefox e IE) ma sembra che la mia pagina li ignori

il codice

#contenitore{
	width: 100%;
	margin: 0 auto;
	text-align: center;
	clear: both;
}
.box{
	text-align: center;
	float: left;
	width: 18%;
	margin: 3px;
	background-color: #ececec;		
	color: #CCCCCC;
	border: 1px solid #ffffff;
}
....
<div id="corpo">
<div class="header">...</div>

<div id="contenitore">
<div class="box"> ... </div>
<div class="box"> ... </div>
<div class="box"> ... </div>
<div class="box"> ... </div>
</div>

<div class="footer">...</div>
</div>

dove sbaglio?
grazie per l'aiuto

[Mich_]

Il #contenitore deve contenere esasttamente i 4 blocchi e deve poi venir centrato all'interno del body.

Quindi (ad esempio):

html {
  width: 100%;
}
body {
  width: 100%;
  text-align: center;    /* solo per IE */
}
#contenitore{
	margin: 0 auto;
	clear: both;
}
#contenitore:after {
  clear: both;
}

Note:
- il text-align: center; va inserito nel box che contiene quello da centrare
- il margin: 0 auto; va inserito nel box che deve essere centrato
- potrebbe essere necessario un text-align: left; in un box interno (per resettare il center del body)
- il clear va inserito in un box successivo a quello che contiene i blocchi float, ad esempio in un fittizio :after. Per ulteriori dettagli vedi la pillola di fcaldera "fabclearing" (la trovi mediante una ricerca nel forum)

[luigi.84]

credo di aver capito, grazie per l'aiuto