Columnas de igual altura con CSS
Para resolver estas cosas en internet podremos encontrar algunas soluciones en las cuales la mayoría usa javascript, pero la pregunta es ¿y si mi navegador tiene desactivado el javascript? gran problema, ¿entonces qué, me pongo a usar tablas?, no!, no hay que desesperarse ya que para ello existe CSS. Lo que voy a explicarles a continuación es como lograr que nuestros divs tengan la misma altura a medida de que el div que contiene la información de nuestro site aumente su altura haga que el div que contenga nuestro menú aumente en forma paralela a este.
Pasemos al código del CSS:
#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;
}
Ahora hagamos uso de este CSS en nuestro html:
<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>
Explicando a groso modo lo que hemos hecho es que darle al div #content además de un color específico un borde derecho de 200px y un margen derecho de -200px, esto para qué? pues para que cuando insertemos el div #menu este se sobreponga en él y el borde finja ser la columna lateral derecha de manera que al aumentar el tamaño del contenido lo lógico pues es que el borde aumentará paralelamente su altura con relación al contenido, lo cual nos servirá para insertar nuestro menú y se vean de igual altura. Pueden ver un ejemplo pulsando aquí
Sencillo verdad?, espero que esto pueda servirles de ayuda.
