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