el cssar

La solución definitiva al problema de los float que desbordan su contenedor.

Muchos de vosotros conoceréis este probelema y las viejas soluciones, como añadir un elemento con clear: both o aplicar un attributo overflow, y habréis sufrido la contrariedad del primero y las inconsistencias del segundo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Ir directo a la solución

Añadir un elemento nuevo sólo para solucionar este problema, en cierta forma se pude decir que es “marcado de presentación”, ya que lo usamos exclusivamente para ese fin. Aunque usásemos el footer por ejemplo -cosa que cuando son elementos repetitivos no vamos a hacer (p.e. una lista con imágenes flotadas)- tendríamos que meterlo dentro del mismo elemento que aloja el resto del contenido, rompiéndonos la estructura semántica de nuestro html.

El uso del overflow fue la nueva solución sugerida por Alex Walker entre otras, ya que Walker incluye soluciones de varios Gurus del CSS. Ésa concretamente es de Paul O’Brien.

Tras realizar varios testes he comprobado que sufre algunas inconsistencias a tener en cuenta.

Cuando la conocí yo ya usaba mi propia solución a este problema y conceptualmente me pareció un error usar un overflow:auto/hidden… puesto que no es nuestra intención ocultar un contenido que sobrepase de un espacio fijo o mostrar el scroll, cosa que si quisiéramos hacer se contradeciría con la necesidad inicial de hacer crecer el contenedor en función de su contenido.

Por otro lado choca con otras técnicas.  Por ejemplo, cuando necesitamos un min-heigh para evitar usar Expresiones dentro de nuestro CSS para IE6 usábamos sencillamente el atributo height, si este height lo combinamos con un overflow:auto,  al sobrepasar el contenido la altura definida obtendremos un escroll indeseado. Obligándonos a contrarrestar ese overflow: auto con un overflow: inherit, que es un valor que IE no reconoce y por lo tanto nos permite “hackear” el valor.  De hecho antes de salir IE7 usaba width combinado con la solución que os quiero presentar para resolver este caso en todos los navegadores sin hacer excepciones para IE.  Sin embargo con la llegada de IE7, que ya responde a min-height, nos encontramos con que height nos fuerza una altura fija que no se expande con el contenido. Razón por la cual nos vemos obligados a hacer la excepción para IE6 y usar min-height para el resto de navegadores.

Otra incompatibilidad es el uso de position con cualquiera de sus valores que no sea el por defecto (static) en el elemento contenedor. Cuando queremos posicionar negativamente un elemento respecto del elemento contenedor, por ejemplo para hacer unas esquinas redondeadas, dicho elemento se moverá tal como se lo indicamos, pero todo lo que salga de su espacio quedará oculto detrás de los lindes del elemento contenedor al que se le aplicó el position: relative (p.e.).
Pero dejemos de despellejar este método que también tiene su utilidad y presentemos esta alternativa para los casos en que los otros métodos nos fallan y por qué no, para los que no nos fallan también.
Analicemos pues qué es lo que queremos qué haga nuestro elemento contenedor y obtendremos la solución a nuestro problema, que recordemos sólo sucede en aquellos navegadores que respetan los estándares. Si analizamos un elemento y buscamos su esencia, veremos que muchos de sus atributos son puramente decorativos, font, background, border, width, heigth… otros se refieren a su posición en el espacio y a su relación espacial con otros objetos, como position, left, right o float, y otros a su interacción con el contenido como sucede con overflow, pero ninguno de ellos lo define como objeto, como elemento. Para entendernos, una persona puede ser alta, baja, negra, blanca, tener varicela, llevar zapatos o ir descalza, incluso tener uno u otro sexo o “incluso ambos”, gustarle un tipo de alimentos o interactuar con sus mascotas de una forma u otra, pero seguirá siendo una persona. No será un perro, ni un gato.

En Html no tenemos la misma variedad de especies, pero sí tenemos 3 tipos de elementos básicos, los elementos de bloque, los elementos en línea y las tablas. Existen un par híbridos, pero al igual que una mula, no son fértiles. La compatibilidad de los navegadores es poca y defectuosa como nos muestran nuestros amigos de kirskmode.org.

Sin embargo como si de un ser superior super-evolucionado se tratase, un elemento html tiene la propiedad de trasformarse genéticamente y mostrarse como aquello que no es gracias al atributo display.

Si observamos el comportamiento y las propiedades de los 3 distintos elementos veremos que hay uno que se comporta exactamente como necesitamos. Es el <table>. Estamos llegando pues a una solución compatible con todos los navegadores que respetan los estándares, tanto los basados en Gecko como en WebKit o Presto y que, puesto que problema de los floats no afecta a la familia IE, es tan sencilla y limpia como flotar el elemento contenedor, pero sin los inconvenientes de éste y brindándonos todas las características de una tabla mientras mantenemos la semántica. Sí, estoy hablando de usar display:table;

Aquí tenéis el ejemplo:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div style="display: table;">
<img style="float: left;" src="URl_de_la_imagen" width="100" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
Un saludo y que lo disfrutéis.