Layout a due colonne in percentuale

La falsa colonna

Questo layout utilizza un immagine di sfondo per l'elemento <body> al fine di disegnare la falsa colonna sulla sinistra. Tale immagine ha le dimensioni di 2000 x 10 pixel ed ha un bordo destro di 1 pixel di larghezza, realizzato creando una selezione di 1 x 10 pixel e riempiendola con il colore nero. Vediamo il codice relativo all'elemento <body>:

body {
margin: 0;
padding: 0;
background: #f8f8ee url(2000x10.gif) repeat-y 25% 0;
}

Come si intuisce dal frammento di codice, l'immagine di sfondo è stata ripetuta in orizzontale e posizionata esattamente al 25% del suo contenitore, sempre in orizzontale. In questo modo si è venuta a creare una falsa colonna larga 25% del contenitore che si estenderà lungo tutta l'altezza della pagina, indipendentemente dal contenuto della colonna di sinistra.

Posizionamento delle colonne

Il posizionamento delle due colonne è stato eseguito mediante la proprietà float. Il codice che segue illustra tale procedimento:

#navigazione {
float: left;
width: 23%;
margin: 0;
margin-left: 0;
}

#content {
float: right;
width: 71%;
margin: 0;
padding: 1em 0 0 0;
}

L'ampiezza complessiva non supera il 94% del totale, e questa è una buona strategia per poter gestire al meglio eventuali margini e padding aggiuntivi. Come avrete notato, nella colonna del contenuto ho posizionato il testo sfruttando il padding superiore dell'elemento e lasciando i margini settati a zero. Questo perchè Internet Explorer, a differenza degli altri browser, ha una marginazione di default che tende a spostare verso sinistra il contenuto, nonostante l'eventuale dichiarazione di una specifica marginazione. Col padding il problema non si presenta. Nel piè di pagina dovrò necessariamente impostare la proprietà clear su both per poter ripristinare il flusso del documento da entrambi i lati. Infine, se siete curiosi di conoscere le mille stranezze di Internet Explorer, potete visitare il sito in lingua inglese Position Is Everything.

Conclusione

In conclusione, questo layout si presenta abbastanza semplice da realizzare. È un layout spazioso che può essere usato per siti di medie e piccole dimensioni e dalla navigazione relativamente semplice. Se siete interessati alle altre caratteristiche di questo layout, che ora esulano dal compito dell'articolo, è sufficiente visualizzare il sorgente della pagina: eh si, il foglio di stile è incluso nella pagina! Alla prossima.