Micaela 4 de noviembre de 2009 a las 08.30
   Imprimir artículo
elWebmaster.com

CSS: Truco para igualar la altura de varias columnas


cssblurry-columnasImaginen 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.

css-sidebar1

Estructura HTML

El primer paso es definir la estructura HTML de nuestro documento. Hemos usado un layout simple de dos columnas como este:

  1. <div id="wrapper">
  2.     <div id="maincontent">...</div>
  3.     <div id="sidebar">...</div>
  4. </div>

#wrapper

El layer #wrapper contendrá nuestras dos columnas, #maincontent y #sidebar:

  1. #wrapper{
  2.     margin:0 auto;
  3.     width:600px;
  4. }

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

css-sidebar2

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:

  1. #maincontent{
  2.   border-right:solid 200px #DFDFDF;
  3.   position:absolute;
  4.   width:400px;
  5. }

#sidebar

Ahora tenemos que definir #sidebar usando las siguientes propiedades:

css-equal-height-2

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:

  1. #sidebar{
  2.     background:#DFDFDF;  
  3.     margin-left:400px;
  4.     position:absolute;
  5.     width:200px;
  6. }

Y este es el resultado final:

css-equal-height-3

De esta forma la altura de la columna #sidebar parecerá igual a la altura de la columna #maincontent.

Fuente: Woorkup


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (7)

  1. M@rder dice:

    Muy buen truco 😀

  2. W3573R dice:

    Gracias esta muy bueno el truco

    Pura Vida
    Bendiciones

  3. Remedios dice:

    Excelente artículo, pero que ocurre cuando el diseño es elastico (%) y queremos igualar tres columnas?

  4. Morton dice:

    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!

  5. Israel dice:

    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?

  6. César dice:

    Y si en las dos columnas tienes una imagen de fondo que se repite sobre el eje vertical?

  7. €quiman dice:

    Si señor… excelente truco. Una idea completamente simple.

    En mi caso como no tengo el menú de un color, lo que hice fue ponerle color al margen derecho y al margen izquierdo… y hago que se dibujen en la misma posición.

    Cualquiera de los dos que tenga mayor contenido me va a servir para mostrar la linea (el borde) como un separador.

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder