Blog di Eugi GufoEugi Gufo

Ho una ottima notizia per gli sviluppatori front-end. Fare il sidebar di altezza pari a quella del content con il solo CSS è possibile! Di conseguenza, è possibile anche fare il sidebar di altezza 100% con l’impiego del solo CSS e senza impostare l’altezza fissa del div genitore.
Ora vi spiego come si fa. I codici del risultato finale sono riportati verso la fine dell’articolo, ma prima di vederli leggete tutta la spiegazione.
Supponiamo di avere un layout a due colonne: la prima è larga il 25% del div genitore, mentre la seconda è larga il 50% del div genitore.

Nella vita reale possono capitare delle situazioni in cui non abbiamo la possibilità di prevedere in quale delle due colonne ci saranno più contenuti, dunque non possiamo prevedere quale delle due colonne tenderà a essere più lunga (ovviamente in verticale). Solitamente i contenuti di testo sono più corposi, ma su molte pagine dei siti aziendali ho visto i menu laterali molto più lunghi delle zone occupate dai testi.
Il metodo più ovvio e meglio funzionante di creare un layout a due colonne è quello di utilizzare due div con le caratteristiche float. Questo, però, non risolve il problema della altezza:

I blocchi div con float possono però influire sulla altezza del loro container. Di conseguenza, se noi includiamo le nostre due colonne in un container formattando correttamente quest’ultimo (con l’elemento clear o attraverso l’overflow: hidden), esso assumerà l’altezza della colonna più alta:

Se, invece, facciamo due container (uno dentro l’altro), entrambi avranno l’altezza della colonna più riempita.

Ricordiamo le larghezze delle due colonne: 25% per la prima e 50% per la seconda. Quindi la seconda colonna ha la larghezza doppia della prima. Di conseguenza, se assegniamo al container esterno la larghezza 25%, mentre a quello interno la larghezza 200% (cioè il doppio del primo, il 50% della pagina) spostandolo verso destra per una distanza corrispondente alla larghezza del primo container, otteniamo un importante risultato intermedio.

Ora possiamo dedicarci alle colonne. Abbiamo appena creato un container nuovo utile per il calcolo delle dimensioni delle colonne. Dato che la colonna a sinistra deve essere larga il 25% della larghezza della pagina, mentre la larghezza del container interno è già pari al 50% della larghezza della pagina, la nuova larghezza della colonna sarà pari a 50%×0,5=25%. La colonna non deve influire sul flow ma allo stesso tempo deve rimanerne dentro. Quindi impostiamo per la colonna il margin-right: −100% e spostiamo l’elemento verso sinistra per la metà della larghezza del container (50%). Il risultato è proprio quello che ci serve:

Per essere più chiaro ora vi faccio vedere i codici HTML e CSS del risultato finale.
HTML:

<div class="col-wrap1">
<div class="col-wrap2">
<div class="col1">left column</div>
<div class="col2">center column</div>
<div class="clear"></div>
</div>
</div>

CSS:

.col-wrap1 {
width:25%;
background:blue;
}
 
.col-wrap2 {
width:200%;
margin-right:-100%; /* vietiamo a IE6 di allargare il container */
position:relative;
left: 100%;
background:red;
}
 
.col1 {
float:left;
width:50%;
margin-right:-100%;
position:relative;
left:-50%;
}
 
.clear {
clear:both;
font-size:0;
overflow:hidden; /* il preservativo triplo per IE */
}

Sotto questo link si trova un esempio funzionante.
In sostanza, sono stati creati due container che fanno da «controfigure» alle colonne e possono essere allungati entrambi da solamente una delle due colonne.
In uno dei prossimi articoli vi spiego come applicare lo stesso metodo a un layout con le colonne di larghezza fissa.
Il vostro front-end developer aveva detto che è impossibile fare una cosa del genere senza l’uso del JavaScript? Beh, io sono sempre pronto a prendere il suo posto!