11 aprile 2009

Gestire gli elementi flottanti con overflow:hidden

scritto daMauro Accornero

float

Il float è una proprietà css che permette di disporre due o più elementi html uno di seguito all’altro, affiancandoli a destra o a sinistra. Questa proprietà è però molto differente dal posizionamento in quanto altera l’intero flusso della pagina.

Creiamo una pagina html con un div contenitore e all’interno due div con id contenuto e colonna contenenti del testo fittizio.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Esempio float</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style type="text/css">
</style>
</head>
<body>
<div id="contenitore">
<div id="contenuto">
Lorem ipsum[...]
</div>
<div id="colonna">
Lorem ipsum[...]
</div>
</div>
</body>
</html>

Iniziamo formattando margine e padding nel body, diamo un colore per lo sfondo e il testo per essere sicuri che quest’ultimo sia leggibile e allineiamo il testo al centro per internet explorer.

body{
margin:0px;
padding:0px;
background-color:#ffffff;
color:#000000;
text-align:center;
}

Centriamo il div contenitore nella pagina con i margini laterali, definiamo una larghezza fissa e un colore di fondo per renderlo visibile nella pagina ed infine ripristiniamo l’allineamento del testo a sinistra.

#contenitore{
margin:0px auto;
padding:0px;
width:600px;
background-color:#ebebeb;
text-align:left;
}

Come passo successivo aggiungiamo la proprietà float:left;  e un colore di fondo per i div contenuto e colonna

#contenuto{
margin:0px;
padding:0px;
background-color:#cccccc;
float:left;
}

#colonna{
margin:0px;
padding:0px;
background-color:#666666;
float:left;
}

VEDI ESEMPIO

Come si nota dall’esempio i due div invece di allinearsi vanno uno sopra l’altro, questo perchè un elemento flottante diventa implicitamente un elemento di blocco e comportandosi come tale si allarga occupando lo spazio a disposizione. Per evitare questo effetto impostiamo una larghezza fissa ai div contenuto e colonna.

#contenuto{
margin:0px;
padding:0px;
background-color:#cccccc;
float:left;
width:300px
}

#colonna{
margin:0px;
padding:0px;
background-color:#666666;
float:left;
width:300px;
}

VEDI ESEMPIO

Ora i due div flottanti sono allineati ma proviamo a dare una larghezza differente per entrambi.

#contenuto{
margin:0px;
padding:0px;
background-color:#cccccc;
float:left;
width:400px;
}

#colonna{
margin:0px;
padding:0px;
background-color:#666666;
float:left;
width:200px;
}

VEDI ESEMPIO

Come notiamo esiste un’altra conseguenza del float, l’alterazione del flusso, i due div flottanti infatti sono posti fuori dal flusso mentre il div contenitore no, questo infatti non è visibile in quanto non “sente” i due div contenuti e non avendo un’altezza fissa impostata non è visibile.

Per risolvere questo problema mantenendo la pagina che adatta l’altezza al contenuto possiamo impostare overflow:hidden; sul div contenitore.

#contenitore{
margin:0px auto;
padding:0px;
background-color:#ebebeb;
text-align:left;
overflow:hidden;
width:600px;
}

VEDI ESEMPIO

Questa soluzione è supportata da tutti i browser moderni tranne internet explorer 6 e precedenti per i quali occorre assegnare almeno la larghezza o l’altezza del div contenitore, facendo ciò occorre prestare attenzione al fatto che internet explorer 5.5 e 5 presentano problemi con i div con altezza in percentuale e overflow ed occorre quindi modificare la proprietà overflow per renderla inaccessibile ad internet explorer 5.5 e precedenti.

#contenitore{
margin:0px auto;
padding:0px;
background-color:#ebebeb;
text-align:left;
overflow/**/:/**/hidden;
width:600px;
}

VEDI ESEMPIO COMPLETO

Nel caso non fosse possibile impostare in tal modo le regole per il div contenitore è consigliabile gestire il flusso della pagina con la proprietà clear per ottenere il layout desiderato. Vedremo come nel prossimo articolo.

Tag: ,

Un Commentoa “Gestire gli elementi flottanti con overflow:hidden”
Simone
20 gennaio 2010 alle 20:23

…uno spettacolo!!! Prima di leggere questo articolo avevo div “spettinati” come pochi ma ora……
Grazie Mauro.
Saluti

Replica

Lascia un commento