Questa è la traduzione dell'articolo Absolute Columns di Dan Rubin pubblicato originariamente su 24 Ways il 22 dicembre 2008.
I layout con i CSS hanno fatto tanta strada a partire dell'età buia del web publishing, con ogni sorta di applicazione creativa dei float, dei margini negativi e persino delle immagini di sfondo usate per farci realizzare il blocco di base di ogni layout, la colonna. Come si può intuire dal titolo di questo articolo, andremo a discutere di colonne. Per essere più precisi, parleremo di una piccola applicazione del posizionamento assoluto che può essere quello di cui avete esattamente bisogno in certe situazioni.
Se sviluppate siti web da un bel po' di tempo, potreste conoscere questa piccola favola per bambini raccontata da un vecchio monaco Shaolin che sedeva sulla vetta del monte Geocities: "Una volta, le colonne multiple di eguale altezza potevano essere facilmente create usando le tabelle". Ora, sebbene tutti noi siamo comodamente seduti sul treno degli standard, bisogna ammettere che implementare questo particolare dettaglio è ancora fonte di tanti problemi e grattacapi se confrontato con la facilità di implementazione dello stesso effetto con le tabelle.
Soluzioni creative come le false colonne di Dan Cederholm fanno un ottimo lavoro nel far sì che due colonne adiacenti sembrino mantenere la stessa altezza man mano che il contenuto al loro interno si espande. Ciò avviene usando un'immagine di sfondo che va a riempire lo spazio che le colonne non possono riempire.
Ora, il Sacro Graal rappresentato dal far sì che le colonne con i CSS si comportino allo stesso modo delle celle di una tabella o, per meglio dire, come colonne di tabelle, non lo abbiamo ancora trovato (certo, c'è il modulo per le colonne multiple dei CSS3...), ma certe volte potreste avere semplicemente bisogno, per esempio, di una colonna secondaria (diciamo una barra laterale) che corrisponda all'altezza della colonna primaria, senza ricorrere alla creazione di immagini. Ecco in che cosa può esservi utile un pizzico di posizionamento assoluto per farvi risparmiare tempo e ottenere un layout un po' più flessibile.
Avete probabilmente familiarità con il concetto di rendere relativo ciò che è assoluto (Making the Absolute, Relative) elaborato tempo fa da Doug Bowman, ma riassumiamolo rapidamente: un elemento per cui si imposti position:absolute posizionerà se stesso relativamente rispetto al suo elemento antenato più prossimo per cui si sia impostata position:relative piuttosto che rispetto alla finestra del browser (figura 1):
Tuttavia, quello che potreste non sapere è che è che possiamo agganciare più di due lati di un elemento posizionato assolutamente. Sì, è giusto, tutti e quattro i lati (top, right, bottom e left) possono essere impostati, sebbene in questo esempio adotteremo la soluzione solo su tre lati. Si veda la figura 2 per il risultato:
I nostri requisiti sono essenzialmente gli stessi del metodo standard per "position:relative": un <div> usato come contenitore impostato su position:relative e un <div> per la nostra barra laterale impostato su position:absolute, più un altro <div> che rappresenta la nostra colonna principale per il contenuto. Aggiungeremo anche altri elementi comuni del layout (un wrapper, un hader, un footer) in modo tale che il nostro esempio sembri più simile ad un vero layout e non ad un semplice test:
<div id="wrapper">
<div id="header">
<h2>#header</h2>
</div>
<div id="container">
<div id="column-left">
<h2>#left</h2>
<p>Lorem ipsum dolor sit amet…</p>
</div>
<div id="column-right">
<h2>#right</h2>
</div>
</div>
<div id="footer">
<h2>#footer</h2>
</div>
</div>
In questo esempio, alla nostra colonna principale (#column-left) è stata assegnata una larghezza tale da accomodarla al meglio nel contesto del layout (abbiamo usato i pixel come unità di misura, ma il metodo funziona anche con layout fluidi), mentre la colonna destra prende queste impostazioni di stile minimali:
#container {
position: relative;
}
#column-left {
width: 480px;
}
#column-right {
position: absolute;
top: 10px;
right: 10px;
bottom: 10px;
width: 250px;
}
Il trucchetto è semplice: l'elemento <div> con id #container si espanderà verticalmente per adattarsi al contenuto all'interno dell'elemento #column-left. Dicendo alla nostra barra laterale (il <div> con id #column-right) di agganciarsi non solo al lato superiore (top) e a quello destro (right), ma anche a quello inferiore (bottom), essa si espanderà e contrarrà pure per corrispondere all'altezza della colonna sinistra (vi basterà duplicare l'ampiezza del testo 'lorem ipsum' inserito per verificare il tutto):
"Ma aspetta!" dirà qualcuno, "quando la colonna destra ha più contenuto di quella sinistra, non si espande! Il testo esce fuori!". Certo, è esattamente quello che accade e che si suppone debba accadere: gli elementi posizionati assolutamente fanno esattamente quello che dici a loro di fare e purtroppo non sono molto bravi a fare ragionamenti ulteriori).
Tuttavia, ciò non deve abbatterci, perché c'è un modo semplice per risolvere il problema: aggiungendo overflow:auto all'elemento #column-right apparirà automaticamente una barra di scorrimento quando necessario:
#column-right {
position: absolute;
top: 10px;
right: 10px;
bottom: 10px;
width: 250px;
overflow: auto;
}
Mentre ciò potrebbe limitare l'utilità della tecnica a quelle situazioni in cui la colonna primaria sarà quasi sempre più lunga (con più contenuto) di quella secondaria, un po' di pogrammazione anticipata sugli scenari renderà semplice applicare il tutto ai vostri layout.
Non sarebbe davvero corretto fare un party in questo clima festivo senza invitare IE6, sebbene non ci si debba davvero vergognare per lui ammettendo che sì, in questa situazione ha un problema. Per risolverlo vi sarà sufficiente ricorrere alla libreria Javascript IE7 di Dean Edwards.
Inserite il commento condizionale e l'elemento <script> nella sezione <head> della vostra pagina, insieme ad un piccolo hack CSS che solo IE6 e versioni inferiori vedranno e anche quel browser renderà tutto al meglio:
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<style type="text/css" media="screen">
#container {
zoom:1; /* helps fix IE6 by initiating hasLayout */
}
</style>
<![endif]-->
Questo è solo un piccolo esempio di una tecnica che può essere molto più potente, dipende dalle vostre esigenze e dalla vostra creatività.
