Siempre queremos que el diseño de nuestro sitio web tengamos una tendencia absoluta a la perfección, hay a veces que no es posible (no me refiero a la sintáxis del código fuente) y, por ejemplo, las columnas de contenido no quedan a la misma altura, quedando un diseño horrible.
Esto se puede arreglar con Javascript, pero, ¿y si el navegador no tiene activado Javascript?¿Tendré que recurrir a las tablas? ¡No, puedes aplicar CSS para solucionar este problema!
Explicaré a continuación como lograr que los divs tengan la misma altura aunque el contenido de una columna sea mayor que la otra haciendo que la columna con menos contenido aumente en forma paralela a la otra.
El código CSS sería así:
#container {
background-color: #fff;
overflow: hidden;
width: 780px;
margin: 10px auto 5px auto;
border: 1px solid #000;
}
#content {
background-color: #fff;
width: 580px;
border-right: 200px solid #0099FF; /* ancho y color del menú */
margin-right: -200px;
float: left;
}
#menu {
width: 200px;
float: left;
color: #fff;
background: #0099FF;
text-align: left;
}
Aplicamos ese código CSS a nuestro HTML, quedando así para poder conseguir las dos columnas:
<div id="container"> <div id="content"> <p>bla bla bla bla</p> <p>bla bla bla bla</p> </div> <div id="menu"> bla bla bla bla </div> </div>
Desmenuzemos lo que hemos hecho:
Hemos aplicado un color específico al div #content además de tener un borde derecho de 200px y un margen derecho de -200px para que cuando insertemos el div #menu este se situe encima de el div #content y el borde finja ser una columna lateral derecha, con lo que al aumentar el tamaño del contenido el borde aumenta paralelamente su altura en relación al contenido así podremos añadir nuestro menú sin problemas para que se consigan ver a la misma altura. Esta solución es cross-browser (visualización correcta en todos los navegadores) y su código es válido.
Como siempre podemos ver un ejemplo de su funcionamiento.
Vía | CelulaWeb
