miércoles, 1 de febrero de 2012

Altura de un DIV igual que la de sus hijos

Hoy vuelvo con un poco de CSS. Es una cuestión que se me ha planteado en muchas ocasiones: digamos que tienes un div contenedor de otros dos o tres divs con una altura no definida que varía en función del contenido que le vayamos a meter. Estos divs estarán colocados con un float para que tengan la forma de columnas y queden uno junto al otro. Un ejemplo de esta estructura sería:


<div id="contenedor">
    <div id="columna1">contenido de altura variable</div>
    <div id="columna2">
       <div id="sub1">mas contenido</div>
       <div id="sub2">mas contenido</div>
       ...
    </div>
<div>

Cómo he comentado, si a los divs internos (columna1 y columna2) les aplicamos un estilo para que "floten" quedarán en forma de columna: float:left;
Sin embargo tendremos un problema con el contenedor que no se adaptará a la altura de los hijos y se quedará con una altura de 0

Para solucionar esto, hay que añadir un último div a la estructura que no tenga la propiedad float y con un clear:both como se ve a continuación:

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

De esta manera quedará solucionado el problem y el div padre se quedará adaptado a la altura de la más alta de las dos columnas

Visto en muchos sitios, pero cogido de aquí