CSS  »  Articoli  »  CSS Template e layout 

Senza dubbio i float sono uno dei mezzi più potenti e diffusi per realizzare layout. Ne abbiamo parlato già in moltissime occasioni. C'è però ancora una tecnica di cui non abbiamo parlato.

Inizialmente presentata su A List Apart, la tecnica dei margini negativi è semplice, versatile ed è indicata per una certa classe di layout. Vedremo qui la versione a due e tre colonne: ma prima di addentrarci nell'esame di codice ed esempi, vediamo le caratteristiche e i possibili usi.

Caratteristiche del layout

I margini negativi si usano generalmente per realizzare layout liquidi a due e tre colonne in cui le colonne laterali hanno larghezza fissa. Per ottenere l'effetto desiderato è necessaria una particolare codifica HTML, in cui la disposizione dei contenuti è ben definita, e sono necessari alcuni contenitori aggiuntivi. Se questo può essere un eccesso di markup, si consideri che avere la colonna dei contenuti spostata verso la cima del codice può costitutire un benefit per l'accessibilità e i motori di ricerca. Ma non indugiamo oltre e passiamo agli esempi.

La versione a due colonne

Vediamo subito l'esempio: si tratta di un layout liquido a due colonne realizzato con i margini negativi. Ecco l'HTML di base:

<div id="container">
    <div id="header">header</div>
    <div id="wrapper">
        <div id="content">contenuto</div>
    </div>
    <div id="sidebar">navigazione</div>
    <div id="footer">footer</div>
</div>

Prima di addentrarci nel CSS, due commenti sul markup. La cosa essenziale da notare è che il div id="content" è racchiuso da un div id="wrapper" e che entrambi precedono la navigazione. Il wrapper è un contenitore aggiuntivo che ha lo scopo di fornire un appoggio al foglio di stile.

Il foglio di stile

Il foglio di stile dell'esempio è piuttosto semplice e non fa uso di hack. Vediamolo passo passo. Per prima cosa vengono rimossi i margini e il padding della pagina, viene definito lo sfondo sul container per le false colonne (cfr. Articolo «False colonne») e le regole per l'header:

html,body{margin: 0;padding: 0}
body{font: 100.01% Arial,sans-serif}
div#container{width: 100%;background: #FFF url(col.jpg) repeat-y right}
div#header{background: #555B65;color: #FFF}
div#header h1{margin:0 0 20px;padding: 10px 20px;font-size: 200%}

La dichiarazione width:100% è superflua e ininfluente, e serve solo per sistemare un difetto di resa dello sfondo di IE5.

Ora arriviamo alla parte essenziale. Per applicare i margini negativi il wrapper assumerà la larghezza del contenitore (il 100%), verrà reso float e traslato a sinistra di 200 pixels, così da lasciare posto per la colonna di navigazione che sarà resa float a destra.

Il risultato è che il wrapper verrà portato di 200px oltre il lato sinistro della finestra. Per rimettere a posto le cose i contenuti effettivi, racchiusi dal div id="content", avranno un margine sinistro di 220px (200 per riportare i contenuti all'interno dell'area visibile, più 20 per distanziarli dalla lato sinistro del viewport) e un margine destro di 20px per distanziare la colonna di navigazione. Quest'ultima viene resa float a destra. Ecco il CSS:

div#wrapper{float: left;width: 100%;margin-left: -200px}
div#content{margin: 0 20px 0 220px}
div#sidebar{float: right;width: 180px;
    margin-right: 10px;display: inline;font-size: 80%}

Da notare che la colonna di navigazione è 180px e ha un margine destro di 10px, così da lasciare 10px sui due lati dei 200px della falsa colonna. La dichiarazione display:inline serve per sistemare un noto bug di IE che raddoppia i margini concordi con il float.

Infine la regola sul footer. Per un layout robusto e per far sì che che non ci siano vincoli sulla larghezza relativa delle colonne basterà dare il clear su entrambi i lati:

div#footer{clear:both;padding: 3px 20px;background: #959FB1}

Tutto qui. Con delle regole logiche e semplici abbiamo ottenuto un layout robusto e con una resa cross-browser molto estesa: Il risultato è stato infatti testato su IE 5,5.5 e 6, Opera, Mozilla e Safari. Lo stesso principio può essere applicato ad un layout a tre colonne, vediamo come.

Altri articoli

Altre guide

Altre newsletter