Creare box annidati con i CSS, non ha una curva di apprendimento alta, soprattutto se è chiaro il comportamento stesso di un div, e del suo posizionamento nel flusso del documento.
Gli esempi che si possono fare sono tantissimi. Pensandoci bene, qualsiasi sito web parte dal concetto dei box annidati. Testo, foto, gallery ecc... se si devono inserire all'interno di una pagina web, devono necessariamente essere "circoscritti" all'interno di un box, il quale è racchiuso all'interno del suo genitore ecosì via...
Per capire il concetto dei box annidati, ho preparato una demo, molto semplice, contenente due box. Contenitore e contenuto. Possiamo paragonarlo alla "base" per la costruzione di qualsiasi pagina web. Il codice:
#container {
padding: 10px;
margin-top: 5px;
margin-bottom: 5px;
margin-right: auto;
margin-left: auto;
background-color: #fff;
border: 1px solid #000;
width: 80%;
text-align:left;
}
mentre il codice per la gabbia interna è il seguente:
.boxinterno {
padding: 10px;
margin: 10px 0px 5px 0px;
border: 1px solid #000;
text-align:left;
background-color:#999;
}
Si noti che per il box interno, a differenza di quello esterno, ho utilizzato una classe e non un ID. Il motivo è semplice: mentre un box con ID deve essere unico per ogni pagina, una classe può essere richiamata all'infinito, senza nessun problema.