In questo articolo precedente, che riguardava i modi per ottimizzare il nostro CSS per rendere uniforme la visualizzazione del nostro sito su tutti i maggiori browser, abbiamo affrontato il bug di IE6 che riguarda l’altezza di un blocco contenente dei blocchi flottanti. Dato che questo comportamento errato del browser è uno dei primi problemi a cui un webdesigner deve fare fronte, e spesso risulta incomprensibile, facciamo il punto della situazione e vediamo tutte le soluzioni possibili.

Ma prima, partiamo dal problema.

Blocchi flottanti e altezza del contenitore: perchè ti comporti così?

Dobbiamo realizzare un layout che preveda una impaginazione a due colonne e un footer: assegnamo ai nostri blocchi la proprietà float: left, definiamo una larghezza per entrambi in modo tale che non superi la larghezza del blocco contenitore, inseriamo il footer, cui assegnamo la proprietà clear: both e se abbiamo fatto tutto senza errori dovremmo ottenere cioò che ci aspettiamo, cioè che l’altezza del contenitore si adatta a quella dei blocchi flottanti, e invece in tutti i browser (tranne che in IE6, che apparentemente, si comporta correttamente) l’altezza del contenitore non varia, in quanto i blocchi flottanti sono a tutti gli effetti sottratti dal flusso della pagina.
Questo comportamento, che potrebbe sembrare assurdo, ha in realtà una spiegazione: esso è necessario per gestire, per esempio, l’altezza di paragrafi contenenti immagini flottanti. Se l’altezza del paragrafo fosse determinata dall’altezza dell’immagine flottante, il testo del successivo paragrafo non potrebbe salire e disporsi attorno all’immagine stessa. Non è ancora chiaro? Ecco una pagina di esempio con il comportamento corretto e quello errato.

Ecco di seguito i fix per fare in modo che tutti i browser abbiano un comportamento uniforme:

1) Inserire un elemento vuoto con "clear: both"

Questa tecnica ristabilisce il normale flusso della pagina inserendo dopo gli elementi flottanti un elemento vuoto con proprietà clear: both. Il punto debole di questa tecnica è l’inserimento in pagina di un elemento con valore semantico pari a zero. Ecco un esempio:

<div id="contenitore">
  <div class="floatLeft">Contenuto del blocco</div>
  <div class="floatLeft">Contenuto del blocco</div>
    <div class="clearBoth"><!-- --></div>
</div>

Ed ecco come impostare correttamente i CSS:

#contenitore {
	width:700px;
  background:#C30;
}
.floatLeft {
  float:left;
  background:#0C0;
  color:#FFF;
  padding:20px;
  width:50px;
  margin:0 50px 0 0;
}
.clearBoth {
	clear:both;
}

2) Utilizzare la pseudoclasse :after

Utiliziamo la pseudoclasse :after per aggiungere un "punto invisibile" al termine del contenitore:

<style type="text/css">
   .clearfix:after {
   content: ".";
   display: block;
   height: 0;
   clear: both;
   visibility: hidden;
} 
.clearfix { /* for IE/Mac */
   display: inline-block;
}
</style><!-- main stylesheet ends, CC with new stylesheet below... -->
<!--[if IE]>
<style type="text/css">
.clearfix {
   zoom: 1;     /* triggers hasLayout */
   display: block;     /* resets display for IE/Win */
}  /* Only IE can see inside the conditional comment
and read this CSS rule. Don't ever use a normal HTML
comment inside the CC or it will close prematurely. */
</style>  <![endif]-->

Ecco la pagina di esempio.

3) Utilizzare overflow:hidden

Ecco la soluzione più semplice:

Di seguito il codice css…

div.container {
   border: 1px solid #000000;
   overflow: hidden;
   width: 100%;
}

div.left {
   width: 45%;
   float: left;
}

div.right {
   width: 45%;
   float: right;
}

…ecco la pagina di esempio.

Chi ha letto questo articolo, ha gradito anche:

1. IE6: Fix per i più comuni bug
2. CSS3 Columns e jQuery: layout multi-colonne ad altezza pari
3. CSS Pseudo-classi: come usarle su IE6+!