CSS  »  Articoli  »  CSS Template e layout 

Nel settimo esempio la navigazione è affiancata ai contenuti, ed entrambe hanno larghezza percentuale, mentre la sezione aggiuntiva ricopre tutta la larghezza del viewport. In questo caso si sono usati i float opposti. Ecco le uniche tre regole per il layout:

div#wrapper{float: right;width: 70%}
div#navigation{float: left;width: 29.9%}
div#extra{clear :both;width: 100%}

Per ottenere l'ottavo esempio è bastato invertire i due lati dei float.

Se si vuole avere un layout simile ma con la navigazione a larghezza fissa bisognerà ricorre ai margini negativi. Ecco così il nono esempio e il relativo CSS:

div#wrapper{float: left;width: 100%}
div#content{margin-left: 200px}
div#navigation{float: left;width: 200px;margin-left: -100%}
div#extra{clear: left;width: 100%}

Ecco quindi l'esempio dieci, l'esatto speculare di quello appena visto, che conclude la serie dei layout fluidi a due colonne.

Layout fissi a due colonne

Arriviamo così alla parte conclusiva di questa serie: vedremo ora otto layout a larghezza fissa, tutti costruiti sul markup di base. Ecco il primo esempio per questa tipologia, in cui navigazione e sezione aggiuntiva si trovano alla destra dei contenuti principali. L'implementazione è piuttosto semplice e float opposti. Ecco il CSS:

div#container{width: 700px;margin: 0 auto}
div#content{float: left;width: 500px}
div#navigation{float: right;width: 200px}
div#extra{float: right;clear: right;width: 200px}
div#footer{clear: both;width: 100%}

Invertendo i lati del float dell' esempio precedente è possibile ottenere l'esatto speculare.

Anche il prossimo esempio usa i float opposti. In questo caso però la sezione aggiuntiva si dispone sotto i contenuti principali, ricalcandone la larghezza e il lato del float:

div#container{width: 700px;margin: 0 auto}
div#content{float: left;width: 500px}
div#navigation{float: right;width: 200px}
div#extra{float: left;width: 500px}
div#footer{clear: both;width: 100%}

Ecco come al solito l'esempio con le colonne scambiate di posto.

Negli esempi quindici e sedici rispetto ai due appena visti la sezione extra occupa tutta la larghezza del layout anzichè solo quella dei contenuti. Per entrambi è bastato non dichiarare float la sezione aggiuntiva.

Infine negli esempi diciasette e diciotto i float opposti sono stati applicati solo sulle due colonne secondarie, che occupano ciascuna metà della larghezza del layout e sono disposte sotto il contenuto principale.

Conclusioni

Abbiamo visto come lo stesso markup possa servire moltissimi layout. Nei 40 esempi mostrati non abbiamo usato hack o workaround, ma poche regole CSS logiche e semplici che conseguono un'ottima compatibilità cross-browser: tutti gli esempi sono infatti testati su Internet Explorer 5, 5.5 e 6, Opera, Firefox e Safari.

Altri articoli

Altre guide

Altre newsletter