Columnas de igual altura con CSS

3.Abr.2007

Publicado por MijT en CSS | 1849 Lecturas | 1 comentarios

(0 ptos. de 0 votos.)

Muchas veces al momento de diseñar o maquetear una web o un blog a dos columnas usando capas o divs lo que siempre deseamos es que exista una elgancia en nuestro diseño sobre todo cuando queremos usar colores diferentes para nuestras columnas como la que cotendrá el menú por ejemplo, entonces nos ponemos a diseñar y al probar lo que hemos realizado nos damos con la penosa sorpresa de que nuestro a diseño le falla algo, no me refiero a la sintaxis de nuestro código fuente, sino que cuando vemos como está estructurado nos encontraremos con que las columnas no tienen la misma altura y por tanto nuestro diseño se vería mal.

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.