CSS  »  Articoli  »  CSS Template e layout 

Il layout con colonne ordinate e float opposti presenta molti vantaggi. Tra questi, una buona compatibilità cross-browser, nessun vincolo di lunghezza relativa delle due colonne, migliore accessibilità verso screen-reader e browser testuali, e probabilmente migliori chance di posizionamento nei motori di ricerca rispetto ai layout a due colonne con float in cui la navigazione precede i contenuti.

Prima di passare al prossimo argomento, una piccola nota: nei layout liquidi se vorrete usare i float opposti dovrete avere cura di impostare le due percentuali di modo che la loro somma sia 99% e non 100% come dovrebbe essere. Infatti, solo per certe larghezze del browser (qualunque browser) problemi di arrotondamento delle percentuali calcolate fanno sì che la somma delle due larghezze sia poco più di 100%, ottenendo così layout in cui una delle due colonne inizia verticalmente dove l'altra finisce.

Contenere i float senza markup aggiuntivo

Abbiamo già accennato a come contenere i float nell'Risoluzione dei problemi dei CSS - I. In sostanza, un elemento reso float tende a sbordare dal suo contenitore. Vediamo un tipico esempio del problema. La soluzione più nota e diffusa, come indicato anche in un articolo di Eric Meyer è inserire, prima di chiudere il contenitore dell'elemento float, un elemento che da il clear, in questo modo:

<div style="clear:right">&nbsp;</div>

Questa soluzione implica purtroppo l'uso di HTML puramente presentazionale anche se privo di contenuto.

Già un po' di tempo fa è comparsa una prima alternativa, che si rivela a parer mio troppo complessa e poco pratica.

A fine 2004 Steve Smith pubblica la FnE (float nearly everything), un metodo semplice, robusto e cross-browser per contenere i float senza markup aggiuntivo. In sostanza, si tratta di rendere float anche il contenitore dell'elemento float. Spesso sarà necessario attribuire anche una larghezza al contenitore principale. Vediamo subito l'esempio in cui abbiamo applicato la FnE. Ecco il codice HTML dell'esempio:

<div id="container">
    <div id="newsbox">Elemento float</div>
    <div id="content">Qui il contenuto</div>
</div>

Ed ecco il CSS:

div#container{float: left;width: 100%;background:#B1D4FF}
div#newsbox{float:right;display:inline;width:150px;
    border: 1px solid #CCC;margin:5px;background: #FFC}

Ancora più recentemente è stata scoperta un' altra tecnica, simple clearing of floats in cui si spiega come contenere un float senza markup aggiuntivo ma grazie alla proprietà overflow. Vediamo l'esempio. Il markup è minimale ed è lo stesso dell'esempio precedente. Vediamo il CSS:

div#container{width:100%;overflow:auto;background:#B1D4FF}
div#newsbox{float:right;display:inline;width:150px;
    border: 1px solid #CCC;margin:5px;background: #FFC}

Le due tecniche sono equivalenti come prestazioni, semplicità e resa cross-browser. In sostanza sia la proprietà float che la proprietà overflow hanno l'effetto di forzare il contenitore a contenere il float. Mi raccomando, cosa importantissima è che le due tecniche vanno usate dichiarando una larghezza specifica (anche in pixel va bene, oppure 100% se non possiamo fare altrimenti).

Altri articoli

Altre guide

Altre newsletter