floating e box annidati

[Gibbster]

Ciao a tutti ragazzi,
ho il seguente markup in una pagina xhtml. Ciascun <div> incluso in quello principale rappresenta una sezione del museo, che a sua volta può contenere una arbitraria quantità di <div>, ovvero delle sottosezioni. La ramificazione può contare un numero di livelli altrettanto arbitrario.

<div id="struttura"> 
            <div class="greenSquare">Piano Sotterraneo
               <div class="redSquare">Collezione Egiziana</div> 
               <div class="redSquare">Collezione Epigrafica</div> 
            </div> 
            <div class="greenSquare">Piano Terra
               <div class="redSquare">Sculture della Campania romana</div> 
               <div class="redSquare">Collezione Farnese - Sculture</div> 
               <div class="redSquare">Collezione Farnese - Gemme</div> 
            </div> 
            <div class="greenSquare">Piano Ammezzato
               <div class="redSquare">Casa del Fauno</div> 
               <div class="redSquare">Gabinetto</div> 
               <div class="redSquare">Mosaici</div> 
               <div class="redSquare">Numismatica</div> 
            </div> 
            <div class="greenSquare">Primo Piano
               <div class="redSquare">Cuma</div> 
               <div class="redSquare">Magna Grecia</div> 
               <div class="redSquare">Napoli Antica</div> 
               <div class="redSquare">Pithekoussai</div> 
               <div class="redSquare">Popoli anellenici della Campania</div> 
               <div class="redSquare">Preistoria e Protostoria</div> 
               <div class="redSquare">Tempio di Iside</div> 
               <div class="redSquare">Villa dei Papiri</div> 
               <div class="redSquare">Affreschi da Pompei</div> 
               <div class="redSquare">Salone della Meridiana</div> 
               <div class="redSquare">Avori, ossi, terrecotte invetriate</div> 
               <div class="redSquare">Vetri</div> 
               <div class="redSquare">Argenti</div> 
               <div class="redSquare">Plastico di Pompei</div> 
               <div class="redSquare">Suppellettile in bronzo</div> 
            </div> 
</div>

Io vorrei rendere, mediante CSS, un "quadrato" per ogni sezione. Questi quadrati, inclusi l'uno nell'altro, li vorrei rendere a colori alterni livello dopo livello. Avevo pensato di usare delle dimensioni percentuali, e il floating per permettere a tutti questi div di allinearsi secondo il flusso. Il problema è che questi finiscono per sforare oltre il bordo del container più esterno. Avete qualche idea sul come possa fare?

Grazie in anticipo!

[Shores]

Non e' molto chiaro che cosa stai cercando di ottenere... per quadrato intendi che ognuna delle div ha un border, o cosa?

Detto questo, perche' dovresti usare un float? il float ti serve solo se vuoi che elementi posti allo stesso livello si affianchino, e comunque, se davvero e' questa la tua esigenza, non ci hai detto cosa vorresti succedesse quando i blocchi strabordano: vorresti si allargasse il contenitore, vorresti che la parte esterna venisse tagliata, vorresti delle barre di scorrimento...

[Gibbster]

hai ragione, cerco di essere più chiaro.
Ognuno di quei div rappresenta un quadrato con un border, si.
L'idea sarebbe quella di far allargare il box più esterno in modo che quelli interni non trabordino. Pensavo di usare la proprietà float in modo che tutti i box collocati allo stesso livello si affianchino uno all'altro. Ad esempio:

<div id="struttura"> 
            <div class="greenSquare">Piano Sotterraneo
               <div class="redSquare">Collezione Egiziana</div> 
               <div class="redSquare">Collezione Epigrafica</div> 
            </div> 
</div>

i due <div> con classe redSquare vorrei che fossero rappresentati come due quadrati affiancati, dentro il quadrato greenSquare...

[Shores]

Perche' invece di usare delle div non usi degli span a cui dare display:inline-block? essendo oggetti inline non ha bisogno di floatarli per ottenere che si affianchino, e non floatandoli dovrebbero fare si da soli che il loro contenitore si dilati per contenerli...

[Gibbster]

allora ho sostituito tutti i <div> con degli <span>, ed ho settato la proprietà "display: inline-block". Il punto è che non riesco a farli diventare quadrati, perché per farlo dovrei settare width e height nel div più esterno (quelli interni hanno width e height settati in percentuale), ma se faccio questo mi espongo ad overflow...

<div id="struttura"> 
            <h5>Struttura del Museo</h5>
            <span class="greenSquare">Piano Sotterraneo
                 <span class="redSquare">Collezione Egiziana</span>
                 <span class="redSquare">Collezione Epigrafica</span>
            </span>
            <span class="greenSquare">Piano Terra
                 <span class="redSquare">Sculture della Campania romana</span>
                 <span class="redSquare">Collezione Farnese - Sculture</span>
                 <span class="redSquare">Collezione Farnese - Gemme</span>
           </span>
           <span class="greenSquare">Piano Ammezzato
                 <span class="redSquare">Casa del Fauno</span>
                 <span class="redSquare">Gabinetto</span>
                 <span class="redSquare">Mosaici</span>
                 <span class="redSquare">Numismatica</span>
           </span>
           <span class="greenSquare">Primo Piano
                 <span class="redSquare">Cuma</span>
                 <span class="redSquare">Magna Grecia</span>
                 <span class="redSquare">Napoli Antica</span>
                 <span class="redSquare">Pithekoussai</span>
                 <span class="redSquare">Popoli anellenici della Campania</span>
                 <span class="redSquare">Preistoria e Protostoria</span>
                 <span class="redSquare">Tempio di Iside</span>
                 <span class="redSquare">Villa dei Papiri</span>
                 <span class="redSquare">Affreschi da Pompei</span>
                 <span class="redSquare">Salone della Meridiana</span>
                 <span class="redSquare">Avori, ossi, terrecotte invetriate</span>
                 <span class="redSquare">Vetri</span>
                 <span class="redSquare">Argenti</span>
                 <span class="redSquare">Plastico di Pompei</span>
                 <span class="redSquare">Suppellettile in bronzo</span>
           </span>
</div>

quà le proprietà che ho settato

div#struttura{
    margin: 5px;
    padding: 10px;
    border: 1px solid;
}

span.greenSquare{
    margin: 5px;
    padding: 10px;
    border: 1px solid;
    text-align: left;
    background-color: #EE6A50;
    width: 50%;
    height: 50%;
    display:inline-block;
}

span.redSquare{
    margin: 5px;
    padding: 10px;
    border: 1px solid;
    text-align: left;
    background-color: #B3EE3A;
    width: 50%;
    height: 50%;
    display:inline-block;
}