Imaginen que tienen que implementar un diseño de dos columnas y desean que la altura de la sidebar sea igual a la columna del contenido principal ¿Qué podemos hacer?
Hoy describiremos un simple truco CSS para implementar un efecto falso de igual altura de columnas utilizando las propiedades CSS position:absolute y border.
Estructura HTML
El primer paso es definir la estructura HTML de nuestro documento. Hemos usado un layout simple de dos columnas como este:
-
<div id="wrapper">
-
<div id="maincontent">...</div>
-
<div id="sidebar">...</div>
-
</div>
#wrapper
El layer #wrapper contendrá nuestras dos columnas, #maincontent y #sidebar:
-
#wrapper{
-
margin:0 auto;
-
width:600px;
-
}
#maincontent
El layer #maincontent es la columna izquierda del coumento que contendrá el contenido principal de la página (por ejemplo el texto del artÃculo). La imagen siguiente ilustra el concepto básico utilizado para implementar este truco:
Tenemos que agregar un borde extra al layer #maincontent (200px) sobre el cuál se colocará #sidebar. De esta forma tendremos un fondo falso para #sidebar, representado por el borde derecho de la columna #maicontent, que tendrá la misma altura del layer #maincontent. Este es el código CSS:
-
#maincontent{
-
border-right:solid 200px #DFDFDF;
-
position:absolute;
-
width:400px;
-
}
#sidebar
Ahora tenemos que definir #sidebar usando las siguientes propiedades:
El ancho de #sidebar es el mismo del ancho del borde derecho de #maincontent (200px) y la propiedad margin-left es igual al ancho del layer #maincontent. Aquà está el código CSS:
-
#sidebar{
-
background:#DFDFDF;
-
margin-left:400px;
-
position:absolute;
-
width:200px;
-
}
Y este es el resultado final:
De esta forma la altura de la columna #sidebar parecerá igual a la altura de la columna #maincontent.
Fuente: Woorkup
Artículos relacionados
- Ajustando la altura de las columnas con CSS
- Combinar todas tus hojas de estilos CSS en una sola con PHP
- CSS3: Colocar colores de fondo al contenido principal y la barra lateral sin usar imágenes
- Jquery.multicol(), convierte en columnas el contenido de tu web
- Grid Designer, herramienta para crear columnas en CSS
Miércoles, 4 de Noviembre de 2009 a las 11.17
Muy buen truco
Lunes, 9 de Noviembre de 2009 a las 03.08
Gracias esta muy bueno el truco
Pura Vida
Bendiciones
Martes, 10 de Noviembre de 2009 a las 11.00
Excelente artÃculo, pero que ocurre cuando el diseño es elastico (%) y queremos igualar tres columnas?
Martes, 10 de Noviembre de 2009 a las 13.44
Hola Remedios
Intenta colocar cada uno de los tres contenidos en un div por separado, y luego envolverlos todos con un solo div cuyo id sea "container". Luego utiliza este código en tu CSS:
#container { overflow: hidden; }#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
Pruébalo y coméntanos los resultados.
Saludos!
Jueves, 6 de Mayo de 2010 a las 06.24
pero si quieres que las columnas aparezcan separadas y con un borde alrededor no hay mas remedio que tirar del Javascript, ¿o acaso me equivoco?
Viernes, 14 de Mayo de 2010 a las 15.43
Y si en las dos columnas tienes una imagen de fondo que se repite sobre el eje vertical?