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.

codice:
<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!