Col·lisió de caixes i flotants

Publicat el 08/04/2007

Aquest artícle és un resum de "Haciendo fluír divs con bordes" d'en Ramón Pravia de Caótico Neutral.

Flotar una caixa de manera que les caixes següents flueixin al voltant seu realment i no pas només el contingut de text.

Al flotar una caixa el contingut de les següents flueix al voltant seu però no les caixes contenidores d'aquest tal i com mostra la figura 1.

Però tal i com mostra la figura 2:

per aconseguir que les caixes també flueixin cal donar-los un overflow: auto és a dir, donat un XHTML tal que:


<div class="flotant">
lorem ipsum...
</div>
<p>lorem...</p>
<p>lorem...</p>

Amb un CSS tal que:


.flotant {
   float: left;
   width: 20em;
}

Caldrà afegir una regla pels paràgrafs, és a dir:


.flotant {
   float: left;
   width: 20em;
}
p {
   overflow: auto;
}

Aquesta solució és vàlida per navegadors tipus Firefox, Opera, Safari i per Internet Explorer 7.

Per Internet Explorer 6 cal afegir una propietat més als paràgrafs per desencadenar el hasLayout, per exemple un height: 1%:


.flotant {
   float: left;
   width: 20em;
}
p {
   overflow: auto;
   height: 1%;
}

esbudellant estàndards