Salta il menu

Layout a tre colonne con posizionamento assoluto

Notizia del 09/04/2007

Per simulare delle colonne con i div e i css non esiste solo il float visto nel precedente tutorial, ma anche il posizionamento assoluto.

In un certo senso, il posizionamento assoluto consente un layout più stabile rispetto a quello ottenuto con il comando float, perché a differenza di quest'ultimo permette di utilizzare lo spazio a disposizione al pixel senza timore che uno dei div finisca sotto l'altro.

Ha però delle controindicazioni: la parte posizionata in maniera assoluta dev'essere obbligatoriamente sempre più corta dell'altra, perché il posizionamento assoluto rimuove il blocco di codice dal flusso della pagina e il rischio è di ritrovarsi con elementi sovrapposti in maniera errata.

Il tutorial illustra solo la parte di codice interessata al posizionamento assoluto; chi desidera i files completi, li può scaricare dal link in calce.

***

Come in precedenza, il linguaggio di marcatura usato è xhtml Strict e questo è il blocco di codice che ci interessa:

<div id="corpo"> <div id="sinistra"> <p>Lorem ipsum dolor sit amet consectetuer interdum Aenean Aliquam Phasellus Morbi. Suspendisse condimentum Curabitur laoreet vitae Vivamus a aliquam Sed lacinia cursus.</p> </div> <hr /> <div id="centro"> <p>Ut lacus tempus vitae natoque et et mauris nulla orci Quisque. Laoreet enim Aenean condimentum Aenean Curabitur amet Nulla pede tellus euismod. Wisi urna congue vitae et mi convallis tristique eu est id. Lobortis Sed orci adipiscing aliquet Nullam diam velit at pellentesque leo. Phasellus In tincidunt In vel cursus neque fringilla ridiculus ullamcorper fames. Urna.</p> </div> <hr /> <div id="destra"> <p>Semper ridiculus lobortis Vestibulum magna cursus at lorem nibh vel in. Et Curabitur cursus eget eleifend nibh Vestibulum In Curabitur metus nonummy. In consequat Proin eu parturient quam laoreet leo Nulla accumsan rhoncus.</p> </div> </div>

Come si vede, si tratta di un div esterno (id="corpo") e di tre div interni (id="sinistra" - id="centro" - id="destra"), ognuno dei quali contiene un paragrafo con del testo; al solito, ho diviso i tre div con una linea (<hr />) in modo da aiutare la navigazione in caso di visualizzazione senza i CSS.

***

Il foglio di stile usato per posizionare in maniera assoluta i div è il seguente:

#corpo { background: #fff; color: #000040; position: relative; text-align: left; border: 1px solid transparent; } #sinistra { border: 2px solid #f00; /* rosso */ width: 20%; position: absolute; top: 0; left: 0; } #centro { border: 2px solid #0f0; /* verde */ margin-left: 22%; margin-right: 22%; } #destra { border: 2px solid #00f; /* blu */ width: 20%; position: absolute; top: 0; right: 0; }

Nel dettaglio la spiegazione dei vari comandi:

#corpo { background: #fff; color: #000040; position: relative; text-align: left; border: 1px solid transparent; }

Al div #corpo imposto i seguenti parametri:

  • sfondo bianco
  • colore del testo blu scuro
  • posizionamento relativo
  • allineamento del testo a sinistra
  • bordo di un pixel per sopperire a un baco di internet explorer che altrimenti non posiziona correttamente il div di sinistra

Il posizionamento relativo del div contenitore è essenziale, perché il posizionamento assoluto fa riferimento al primo contenitore con posizionamento relativo che trova; nel caso non ne trovi, fa riferimento alla finestra del browser (chiamata "viewport").

#sinistra { border: 2px solid #f00; /* rosso */ width: 20%; position: absolute; top: 0; left: 0; }

Al div #sinistra imposto i seguenti parametri:

  • bordo rosso per una miglior comprensione del funzionamento del layout (per comodità ho inserito un commento col nome del colore usato)
  • larghezza pari al 20% della larghezza totale della finestra del browser: le larghezze sono state impostate in percentuale per un layout fluido, ma il sistema funziona in maniera identica anche con misure espresse in pixel
  • posizionamento assoluto del div:
    • posizione 0 in alto
    • posizione 0 a sinistra
#centro { border: 2px solid #0f0; /* verde */ margin-left: 22%; margin-right: 22%; }

Al div #centro imposto i seguenti parametri:

  • bordo verde
  • margine sinistro e destro pari ALMENO alla larghezza dei div laterali; ho aggiunto due punti percentuali per evitare che il contenuto del div centrale sia appiccicato ai div laterali

In questo modo, il div centrale evita di occupare lo spazio dei div laterali che - in quanto inesistenti ai fini del flusso del codice, non riescono a impegnare loro stessi lo spazio necessario.

#destra { border: 2px solid #00f; /* blu */ width: 20%; position: absolute; top: 0; right: 0; }

Al div #destra imposto i seguenti parametri, quasi identici a quelli usati per il div#sinistra:

  • bordo blu
  • larghezza pari al 20%
  • posizionamento assoluto del div:
    • posizione 0 in alto
    • posizione 0 a destra

Naturalmente non è necessario che i due div laterali abbiano le stesse dimensioni; quel che è importante è che la loro larghezza sia uguale o inferiore al relativo margine del div centrale.

Questo il risultato:

Layout a tre colonne in xhtml e css con posizionamento assoluto dei div - visualizzazione corretta

***

Il layout con posizionamento assoluto funziona perfettamente finché la colonna centrale è più corposa delle colonne laterali, ma nel caso queste ultime abbiano maggior contenuto, sorgono dei problemi e si evidenzia il punto debole di questo sistema: le colonne laterali infatti rischiano di coprire parte della pagina o di finire fuori dal layout come succede nell'immagine qui sotto:

Layout a tre colonne in xhtml e css con posizionamento assoluto dei div - colonne laterali troppo lunghe

Per ovviare a tale inconveniente, basta inserire dove necessario una certa quantità di padding alla colonna centrale in modo da allungarla artificiosamente; per farlo, si può per esempio usare una classe.

La stringa di codice:

<div id="centro" class="padding"> <p>Ut lacus tempus vitae... ridiculus ullamcorper fames.</p> </div>

La relativa classe aggiunta nel CSS:

.padding { padding-bottom: 200px; }

con questo risultato:

Layout a tre colonne in xhtml e css con posizionamento assoluto dei div - aggiunta di padding alla colonna centrale per allungarla artificialmente

Per tale peculiarità, il layout con posizionamento assoluto crea qualche problema nel caso di siti gestiti dinamicamente con i CMS dove tutto dev'essere standardizzato quanto più possibile ed è più adatto invece a siti gestiti manualmente, magari con layout che abbisognano di effetti particolari.

***

Scarica la pagina xhtml e il file del CSS con il codice completo (zip - 2kb)

Torna a inizio pagina

Commenti

1 - Scritto da Evan75 il 11/04/2007 alle 07:05

reb sei sempre la numero 1! ottimo lavoro. grazie!

Ivan

2 - Scritto da reb il 11/04/2007 alle 09:46

sei gentile, grazie a te :)

Aggiungi il tuo commento

I campi con * sono obbligatori.

Torna a inizio pagina

Torna a inizio pagina