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.
20 / 41

Layout a due colonne con il float

I Video di HTML.it

Decorare una immagine con Photoscape