Columnas de igual alto
Hubo un tiempo en que esto me dió varias horas de preocupación, y muchas más de búsqueda por internet. Necesitaba construir un layout con 2 columnas (pueden ser 3 o más, da igual) pero que todas las columnas tuvieran el mismo alto, o por o menos que simularan tenerlo. Bien, pasado algún tiempo ya me río de la solución, pues ahora la hago en menos de 3 minutos. Con el siguiente ejemplo, aprovecharé de explicar también cómo crear un layout de 2 columnas, y que ambas colunas tengan (aparenten) tener el mismo alto.
Primero que nada, comencemos a construir nuestro layout de 2 columnas. El tendrá un
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ut risus hendrerit sem adipisc……… La magia ocurre cuando aplicamos estilos a los
#menulateral { Bueno, ya tenemos el esqueleto. Pero ahora queremos que el fondo del menu lateral crezca junto con su contenido, para que se vea más uniforme. Para ello, utilizaremos la siguiente técnica: pondremos nuestros 2 Sigue el código HTML y luego el CSS:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ut risus hendrerit sem adipiscing………
#contenedor { Por último, le agregué la class “clearfix” a #contenedor para que los ) y los del contenido (en este caso un texto simulado en ).
width: 150px;
float: left;
background: #F00;
}
#contenido {
width: 450px;
float: left;
}
width: 600px;
background: url(imgs/fondo.gif) left top repeat-y;
border: 1px solid red;
margin: 10px auto;
}
#menulateral {
width: 150px;
float: left;
}
#contenido {
width: 450px;
float: left;
}