Vedremo in questa lezione come creare un layout a due colonne con i float.
Per realizzarlo bisogna tener presente che nel codice HTML la navigazione deve
precedere i contenuti. Ecco l'HTML essenziale, che risulta identico a quello
del layout a colonna singola:
<body>
<div id="container">
<div id="header"></div>
<div id="navigation"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
È importante considerare che, con un simile ordine di codice, se si
vuole ottenere una buona accessibilità, bisognerà provvedere accesskey
e/o link di "salta navigazione" per agevolare gli utenti ipovedenti che utilizzano
screen reader per navigare.
Aggiungiamo anche in questo caso un po' di contenuti, ottenendo questa
pagina, per ora senza stile.
Procediamo aggiungendo gli stili neccesari per ottenere il layout. Due sono
i passi preliminari da compiere:
- rendere la sezione di navigazione float;
- separare verticalmente i contenuti da essa, attraverso l'uso dei margini dichiarati
sul div principale.
Ecco le regole del foglio di stile che andranno aggiunte alla presentazione
dell'header, dei contenuti e del footer:
div#navigation{
float: right;
width: 13em
}
div#content{
margin-right: 13em
}
Semplice vero? C'è da aggiungere che volendo una colonna secondaria a larghezza
fissa basterà dichiarare le dimensioni in pixel anzichè in em. Questo è
il risultato, che utilizza un
layout fisso, con un po' di regole aggiuntive per presentare l'esempio. Scarica il file zip con l'esempio
Una regola indispensabile per un layout stabile
Arrivati a questo punto bisogna considerare la lunghezza relativa delle
colonne. Infatti, se la colonna di navigazione risulta più lunga si ottiene che
il footer si dispone appena sotto i contenuti e non sotto la colonna secondaria,
causando un effetto non proprio piacevole: la navigazione si sovrappone al
footer.
Per sistemare le cose basta una semplice regola, si fa in modo che il footer
non abbia elementi float alla sua destra attraverso la proprietà clear:
div#footer{
clear: right
}
Con l'aggiunta di questa semplice riga di codice abbiamo sistemato le cose.
