Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 19 di 41
  • livello principiante
Indice lezioni

Layout a due colonne con il float

Tecniche principali e risoluzione del problema del footer
Tecniche principali e risoluzione del problema del footer
Link copiato negli appunti

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.


Ti consigliamo anche