CSS  »  Articoli  »  CSS Template e layout 

Nell'articolo "Float: teoria e pratica" abbiamo visto alcuni esempi di utilizzo della proprietà float, incluso il layout a due colonne con float opposti.

In questo appuntamento vedremo come i float opposti siano utilissimi per realizzare uno dei più classici layout, quello a tre colonne in diverse varianti. Vediamo subito uno dei quattro layout che ho preparato per questo articolo.

Le caratteristiche del layout

Prima di entrare nel vivo dell'articolo con codice ed esempi, ecco brevemente le caratteristiche del layout tutto-float. Anzitutto, l'ordine dei contenuti nell'HTML è per certi versi più naturale rispetto a quello di altri layout tre colonne con float che abbiamo visto finora nella guida al layout o nell'articolo dedicato al layout liquido. Ciò può favorire l'accessibilità e l'indicizzazione nei motori di ricerca.

Una caratteristica notevole che riguarda l'implementazione CSS è che i layout che vedremo non fanno uso di hack o regole specifiche per browser, e che poche e semplici regole contribuiscono a renderlo comunque un layout robusto e con un'ottima compatibilità cross-browser. Gli esempi che vedremo sono stati testati con successo su Internet Explorer 5, 5.5 e 6 per Windows, Opera 7.6, FireFox 1.0 e Safari 1.3.

Un altro punto di forza (comune comunque a tutti i layout con i float) è che il layout non presenta vincoli sulla lunghezza relative delle colonne: ciò significa che, qualunque delle tre colonne sia più lunga non avremo problemi di resa e inoltre daremo l'impressione, grazie alle false colonne che tutte le tre colonne si estendano fino al footer.

Infine, come vedremo attraverso i quattro esempi che ho preparato, la codifica HTML consente diverse disposizioni orizzontali delle tre colonne. A questo punto non ci resta che vedere il codice.

Il codice HTML

Il layout tutto-float ha un codice HTML un po' particolare, grazie al quale è possibile applicare la tecnica dei float opposti. Un layout a tre colonne si compone essenzialmente di tre div principali:

• div id="content" per i contenuti centrali
• div id="nav" per la colonna di navigazione
• div id="extra" per link, news, form ecc..

Più ovviamente header e footer, rispettivamente intestazione e piè pagina. Per semplicità, tutti i layout hanno un container atto a contenere tutto quanto.

I layout che stiamo per vedere hanno tutti lo stesso HTML, caratterizzato da un div aggiuntivo per racchiudere le due colonne principali, ovvero contenuti e navigazione. Vediamo:

<div id="container">
<div id="header"><h1>Il logo qui</h1></div>
<div id="main">
    <div id="content">
        <h2>Contenuti</h2>
    </div>
    <div id="nav">
        <h3>Navigazione</h3>
    </div>
</div>
<div id="extra">
    <h4>Link e altro</h4>
</div>
<div id="footer"><p>Qui il footer</p></div>
</div>

Questo il codice HTML essenziale, ora procediamo con il CSS.

Altri articoli

Altre guide

Altre newsletter