Div con tamaño diferente a su contenido

Div con tamaño diferente a su contenidoEn diseño o maquetación web, el tema de las tablas ya prácticamente ha pasado a la historia. Por diversas razones como usabilidad, lectura en dispositivos especiales e incluso posicionamiento web, las tablas han dejado de usarse en favor a los “divs”. Gracias a esta etiqueta y a su combinación con una hoja de estilos, podremos maquetar toda la página web. Aunque al utilizar esta técnica no estaremos libres de problemas. Uno de los problemas mas frecuentes con que nos toparemos es cuando tenemos un div contenedor y elementos en su interior con la propiedad float. En este caso tendremos un div con tamaño diferente a su contenido:

Div con tamaño diferente a su contenido

Como los dos elementos estan posicionados mediante float, el contenedor no tiene “contenido” y por tanto pierde su tamaño.

Solución 1: añadir un div con la propiedad clear para cerrar

Una solución para corregir ésta situación es la de añadir un tercer div para que cierre, y por tanto el div contenedor adquiera su tamaño correcto:

Div con tamaño diferente a su contenidoPara que cierre el float de los elementos 1 y 2, es necesario que el div que acabamos de añadir tenga la propiedad clear. El código de este nuevo div sería el siguiente:

<div style="clear: both"></div>

Como el div no tiene contenido, no se visualizará nada y gracias a la propiedad clear, el contenedor tendrá el tamaño adecuado. El utilizar esta técnica es conocida como “limpiar los float”.

Solución 2: La propiedad overflow

Aunque la técnica anterior cumple con su funcionalidad, es habitual pensar que no tiene sentido añadir etiquetas html cuando estas no van a tener ningún contenido, como en el caso del div anterior.

Gracias a la propiedad overflow, evitamos tener que introducir código de mas, obteniendo una página mucho mas limpia. Para utilizar ésta técnica, deberemos agregar la propiedad overflow al contenedor tal como os mostramos:

div.contenedor{
  border: 2 px solid #000;
  overflow:auto; 
}
Facebooktwittergoogle_plus