Div centrato in div annidati

[marcopaolo79]

Salve a tutti sono neofita del css e sto provando a centrare un div contenuto dentro un altro div che a sua volta è dentro un altro div etc etc (4 div uno dentro l'altro).
Ho cercato nei forum ma essendo neofita ci capisco poco.

Allora la mia struttura dei div è:

<div id="container">
...
        <div id="content">
         ...
                      <div id="referenze">
                        ...
                                  <div class="box">
                                   ...
                                  </div>
                      </div>
        </div>
</div>

allora container è centrato perfettamente rispetto alla pagina web
io però ho necessità che referenze e il suo contenuto (box) siano centrati rispetto al div content......
e il css l'ho impostato così:

div#container {
	margin:0 auto;
	padding:0 15px;
	width:960px;
	background:url(../images/pippo.png) no-repeat center top;
	min-height:527px;
}
div#content {
	width:910px;
	background:#CCC;
	padding:0 25px;
	float:left;
}
div#content div#referenze{
	margin:0 auto;
}

div#content div#referenze div.referenza{
	float:left;
	padding-left:13px;
}

ma purtroppo non funziona....

dove sbaglio???

[Mich_]

Si parla solo di centrare in orizzontale, vero? Perche` per centrare in verticale ci vogliono sistemi diversi.

Comunque un oggetto flottato non puo` essere centrato.
Quindi il tuo #content puo` essere flottato (dato che non viene centrato), ma il #referenze e il #box non possono esserlo.
E anche il padding-left che hai aggiunto va tolto, perche` crea una asimmetria che non permette poi al browser di lavorare sui margini.

Quindi il tuo CSS potrebbe diventare:

html, body {   /* necessario definirne le dimensioni, altrimenti non puoi centrare quanto contenuto */
	width:100%;
}
div#container {
	margin:0 auto;
	padding:0 15px;
	width:960px;
	background:url(../images/pippo.png) no-repeat center top;
	min-height:527px;
}
div#content {
	width:910px;
	background:#CCC;
	padding:0 25px;
	float:left;
}
div#referenze {
	margin:0 auto;
}
div#content:after {    /* necessario per allungre il blocco fino alla fine dei blocchi float contenuti */
	display: block; 
	visibility: hidden;
	content: "."; 
	height: 0; 
	clear: both;
}

[marcopaolo79]

Ho messo come hai impostato tu ma purtroppo non funziona.....

Forse perchè ho sbagliato a copiarti il codice del css

la mia classe box è quella che erroneamente avevo chiamato referenza quindi il css originario era:

body {
	background:#333 url(../images/body.jpg) repeat-x left top;
	margin:0;
	padding:0;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:13px;
	text-align:center;
}
...
div#container {
	margin:0 auto;
	padding:0 15px;
	width:960px;
	background:url(../images/pippo.png) no-repeat center top;
	min-height:527px;
}
div#content {
	width:910px;
	background:#CCC;
	padding:0 25px;
	float:left;
}
div#content div#referenze{
	margin:0 auto;
}

div#content div#referenze div.box{
	float:left;
	padding-left:13px;
}

praticamente la tua modifica è quella di togliere il div#content div#referenze div.box e aggiungere il content: after ?
perchè purtroppo non mi vengono centrati i div....... anzi mi si spostano completamente per la pagina allargandomi il layout....

nel mio css originale ti ho anche messo come avevo impostato il body

[Mich_]

Non riesco a seguire (e mancano alcuni elementi).

Posta un link (se non e` in rete vedi qualche idea su come fare nel regolamento del forum)