Modificando las plantillas (Tutorial 5: Columnas)

Da la casualidad que, mientras iba armando esta entrada, fueron varias las preguntas sobre el mismo tema y es, sin duda, uno de esos temas aparentemente extraños que parecen causar dolores de cabeza. Se trata de tener un diseño con columnas e igualar sus alturas.

Hace un tiempo, la solución era mostrada en La Bloguería así que vamos a a usar sus explicaciones y ponerlas en práctica, basándonos en una de las variantes del tutorial anterior.

Allí, se mostraba algo así:

Es decir, un blog con tres columnas (sidebar izquierda, posts, sidebar derecha) pero, en realidad, esta soluciòn funcionará con cualquier otro diseño.

¿Cuál es el problema?

Los contenedores (y casi todas la etiquetas) tienen un particularidad, podemos definir su ancho (width) pero cuando queremos definir su altura (height) las cosas se complican porque para calcular esa altura deberíamos conocer su contenido y calcularlo, aunque sea a ojo pero, como los blogs son dinámicos, eso es imposible así que, las columnas tomarán diferentes alturas, unas más cortas, unas más largas; podemos fijarlas pero, en ese caso, o quedarán espacios vacios o parte del contenido quedará oculto o aparecerá una barra de desplazamiento vertical.

Si utilizamos una plantilla sin fondos ni bordes, es un tema irrelevante pero si los tenemos, el efecto de las columnas desiguales puede molestarnos.

Entonces, ¿cómo crear columnas de la misma altura sin que importe el contenido de estas?

Como dice Vane, hay soluciones varias y para todos los gustos:

1. crear columnas falsas utilizando imágenes tiene la desventaja de requerir de esas imágenes extras
2. establecer la propiedad height al 100% no funciona en todos los navegadores
3. utilizar JavaScript tiene resultados dudosos y claro, no funcioanrá si JavaScript está deshabilitado.
   

Así que vamos con el cuarto método que me parece más efectivo y para aplicarlo, sólo requerimos agregar unas pocas propiedades CSS.

Buscaremos cada una de las definiciones de las columnas y a todas ellas les agregaremos un padding (un relleno) de un valor muy alto, el máximo posible (32768 pixeles) y eso creará columnas larguísimas y para compensar esta locura, le agregaremos un margen negativo inverso:

padding-bottom: 32768px;
margin-bottom: -32768px;

Para que estos desarreglos se oculten, el contendor principla tendrá que incluir la propiedad overflow: hidden. En el ejemplo, estas serían las definiciones de estilo:

#sidebar-wrapper1 { /* la sidebar izquierda */
background-color: aliceBlue; /* un color para el ejemplo */
float: left;
margin: 0; /* poner a cero */
overflow: hidden;
padding-bottom: 32768px;
width: 190px;
word-wrap: break-word;
margin-bottom: -32768px;
padding-bottom: 32768px;
}

#main-wrapper { /* el área de posts */
background-color: aliceBlue; /* un color para el ejemplo */
float: left;
margin: 0 10px;
overflow: hidden;
width: 560px;
margin-bottom: -32768px;
padding-bottom: 32768px;
}

#sidebar-wrapper2 { /* la sidebar derecha */
background-color: aliceBlue; /* un color para el ejemplo */
float: left;
margin: 0;  /* poner a cero */
overflow: hidden;
width: 190px;
word-wrap: break-word;
margin-bottom: -32768px;
padding-bottom: 32768px;
}

#content-wrapper {
overflow: hidden;
}

Lo prudente sería que, primero, coloquemos los márgenes en cero y luego aplicáramos los márgenes gigantes a todas las columnas que tengamos.

Eso es todo, con estos pequeños cambios, no debería haber problemas en igualar la longitud de las columnas.

REFERENCIAS:

Modificando las plantillas (Tutorial 1: Anchos)

Modificando las plantillas (Tutorial 2: Widebars)

Modificando las plantillas (Tutorial 3: Sidebars)

Modificando las plantillas (Tutorial 4: Flotaciones)