Contenció de caixes flotants amb overflow: hidden
Publicat el 23/11/2006
Una de les tècniques més robustes actualment per aconseguir que una caixa contingui tots els seus fills flotants és usar overflow: hidden.
A Hack: Contenir caixes flotants
vaig explicar el mètode tal i com el proposava n'Alex Walker però després de força proves l'he desestimat en pro d'aquest.
La tècnica
Donat un XHTML:
<div id="contenidor">
<p id="flotant">
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
</p>
<p>
Sed commodo. Fusce fringilla molestie libero.
In ac diam vitae eros fringilla congue.
</p>
</div>
S'aplicaria un CSS tipus:
#contenidor {
overflow: hidden;
_display: inline-block; /*només per IE6*/
}
L'ús del guió baix a l'exemple només serveix per marcar les propietats exclusives per l'Internet Explorer 6.
L'overflow: hidden farà que els navegadors tipus Firefox, Opera, Safari, Konqueror i Internet Explorer 7 contingui les caixes flotants.
Per l'Internet Explorer 6 caldrà afegir només per ell un display: inline-block. En navegadors tipus Opera i Safari pot donar algun efecte no desitjat.
Si s'ha de donar suport per Netscape 7.1 de Windows aquesta tècnica no és vàlida i caldria seguir emprant la tècnica de la caixa generada.
Aquesta solució funciona millor en la majoria de navegadors ja que l'ús de l'overflow: auto fa que la caixa capturi el focus creant un problema de navegació mitjançant el teclat i en Internet Explorer genera scrolls no desitjats.
Comentaris