div annidati con float

[Yuppies]

Buongiorno a tutti.

Avrei un problema con la realizzazione di un css.

io ho realizzato questo codice:

CSS:
#box {
background-image:url(/img/box.png);
background-repeat: no-repeat;
position:relative;
height:320px;
width:580px;
}
#box div.uno {
background:transparent url(/img/mag_1.gif) no-repeat scroll 0%;
padding:10px 0pt 0pt 35px;
}

HTML:
<div id="box">
<div class="uno">Alessandra</div>
</div>

in questa maniera ottengo una immagine e di fianco il nome Alessandra.

il mio obiettivo sarebbe di ottenere l'immagine e subito sotto l'immagine il nome Alessandra centrato rispetto all'immagine.

qualcuno potrebbe darmi una mano?

io ho provato anche con questo ma comunque non mi funziona dove sbaglio?

CSS:
#box {
background-image:url(/img/box.png);
background-repeat: no-repeat;
position:relative;
height:320px;
width:580px;
}
#box div.uno {
background:transparent url(/img/mag_1.gif) no-repeat scroll 0%;
padding:10px 0pt 0pt 35px;
}
#box #nominativo div.uno {
float:left;
}

HTML:
<div id="box">
<div id="nominativo" class="uno">Alessandra</div>
</div>

[codencode]

Non so se ho capito bene...
Prova così:
HTML

<div id="box"> 
     <div class="uno">Alessandra</div> 
</div>

CSS

#box { 
     background: url(/img/box.png) no-repeat center top; 
     position:relative; 
     height:320px; 
     width:580px; 
} 
#box div.uno { 
     position: absolute;
     bottom: 0;
     width: 100%;
     background:transparent url(/img/mag_1.gif) no-repeat scroll 0%; 
     text-align: center; 
}

Se l'immagine è alta quanto div#box, ovvero 320px, e vuoi staccare la scritta dall'immagine, basta solo che aumenti height di div#box della quantità che ti serve.

[Yuppies]

grazie per il tuo aiuto ma ho provato e non va.

forse non mi sono spiegato bene su cosa voglio ottenere provo con un disegno:

________________________
|--------------------------|
|--------------------------|
|-----IMMAGINE-----------|
|--------------------------|
|--------------------------|
|-----ALESSANDRA---------|
_________________________


questo è pressappoco quello che voglio ottenere ed avevo pensato a:
un div contenitore (box)
ed all'interno di questo div un altro div (quello che contiene l'immagine ed il nome alessandra (ora non so se anche alessandra debba andare in unaltro ulteriore div)

però se avete altre soluzioni da propormi sono bene accette

[codencode]

Quindi la struttura HTML dovrebbe essere così

<div id="box"> 
     <div class="uno">
          [img]...[/img]
          

Alessandra</p>
     </div>
</div>

Quali sono le dimensioni dell'immagine?

[Yuppies]

32px X 32px

[codencode]

E vuoi che immagine e nome siano centrati tra loro e centrati nel div#box? Oppure che div.uno sia di dimensioni più piccole rispetto a div#box?

[Yuppies]

Che confusione sti css.

allora vorrei che il box grande sia
height:320px;
width:580px;

poi ci sia un div che contenga a sua volta
un div con img centrata rispetto al div superiore
e un ulteriore div (sotto quest'ultimo) che contenga il nome alessandra centrato
rispetto al div superiore e di conseguenza rispetto al primo div ma non al div box

[codencode]

Il problema è sapere quanto deve essere largo il div appena dentro div#box. Se non si stabilisce questa dimensione, il tutto risulterà centrato rispetto a div#box.

[Yuppies]

se tu sei riuscito a realizzare la parte dei div che riguarda il dopo div box, potresti mostrarmela perchè così ci smanetto anche io un po magari riesco a trovare una via di uscita.

a me serve capire come mettere in cascata due div (quello dell'immagine e quello del nome) facendoli essere contenuti all'interno di un terzo box

mi pare di capire che tu sei riuscito in questo

[codencode]

HTML

<div id="box">
       <div class="uno">
           [img]...[/img] 
           

Alessandra</p>
      </div>
</div>

CSS

#box div.uno {
     width: 200px;          /*misura a caso*/
     text-align: center;
}