Per dare l'idea che le due colonne laterali si estendono fino al footer indipendentemente
dalla loro lunghezza rispetto alla colonna centrale, si possono usare le immagini
di background: a colore pieno oppure bianche con bordo fine o sfumato, tutto sta
alla creatività. Usare immagini di background richiede però l'aggiunta di un contenitore
supplementare nel codice HTML, almeno in certi casi. Ecco il codice HTML base
per questo tipo di layout:
<body>
<div id="container">
<div id="container2">
<div id="header"></div>
<div id="navigation"></div>
<div id="extra"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</div>
</body>
La questione è che è possibile assegnare una sola immagine di background ad
un elemento: i due elementi a cui assegneremo l'immagine di background sono quindi
container e container2. In realtà sotto certe condizioni l'uso
di un container aggiuntivo è superfluo: una delle due immagini di background si
potrebbe assegnare al body solo nel caso
in cui la pagina si estende almeno per tutta la lunghezza della finestra e si
usi un layout fluido a larghezza totale. La scelta dell'aggiunta di un contenitore
supplementare, d'altra parte, consente maggiore possibilità di personalizzazione
del layout attraverso l'uso del background: è infatti possibile usare layout semifluidi,
fissi o elastici senza dover ritoccare il codice HTML. Ho preparato come esempio
una versione fissa, che potrete riadattare a elastica, fluida o semifluida con
poche modifiche del CSS. Rivediamo tutte le regole fondamentali del foglio di
stile per questo layout:
/*stili per il layout fisso
con background*/
html,body{margin: 0;padding:0}
body{font-family: arial,sans-serif;
font-size: 76%;
text-align:center
}
div#container{width:760px;
margin:0 auto;
border-width: 0 1px;
border-style:solid;
border-color: #ccc;
background: url(3rightcol.jpg) repeat-y top right
}
div#container2{background: url(3leftcol.jpg) repeat-y top left;
text-align: left
}
/*stili specifici per il layout*/
div#navigation{float: left;
width: 120px;
width:130px;
width:120px;
padding: 1em 0 0 10px
}
div#extra{float: right;
width: 190px;
width:200px;
width:190px;
padding: 1em 5px
}
div#content{margin: 0 200px 0 130px;
padding: 1em 10px
}
div#footer{clear:both;
text-align:center;
padding: 5px 0;
background-color: #69c;
color: #000
}
Vediamo il risultato anche nel caso in cui sia più lunga la colonna di sinistra
o quella di destra.
Scarica l'esempio in formato zip di questa lezone