Columnas variables de igual altura con div y CSS

Por: MijT + 08.05.2007

Lo que voy a explicarles a continuación es como lograr en XHTML y CSS que cuando coloquemos un div dentro de otro, el div interior tenga la misma altura que el div en el que está contenido. Esto es util para diseños de varias columnas (Como un blog) donde quieran que una textura o color especifico siga creciendo en función del contenido de otra columna.

Pasemos al código del CSS:

Código :

#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:

Código :

<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>

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.

Ejemplo

Sencillo verdad?, espero que esto pueda servirles de ayuda.

css html

Deja un comentario

IMPORTANTE

Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla.

Habla bien, NO ESCRIBAS EN MAYUSCULA TODO, no escribas como en un SMS, evita cosas como "ke", "x q" y demás abreviaciones.

Aquí funcionan las etiquetas de los foros, puedes usar [b] para negrita, [img] para las imágenes, [url] para los enlaces, etc.

Si tienes preguntas técnicas, envíalas mejor al foro.

Nombre

Comentario