1. Estiramiento vertical

Una de las frustrantes propiedades de CSS es el hecho de que los elementos se estiran verticalmente todo lo que necesiten. Lo que quiere decir que si una imagen de 200px de altura se pone dentro de un <div>, el <div> se va a estirar solo 200px hacia abajo.

Esto se convierte en un interesante dilema cuando usas <div>s para dividir el código y luego le aplicas CSS para convertirlo en una columna. Una columna puede ser mas larga que la otra (Fig. 1). Dependiendo de la cantidad de contenido, resulta difícil crear un diseño con dos columnas igual de altas cuando un solo color se desea para cada columna.

Fig. 1

Hay unas cuantas formas de hacer que las columnas tengan una misma longitud, independientemente del contenido. Yo les estoy mostrando mi solución particular, que resulta ser exageradamente… simple. Este truquito se usa en muchos lugares, incluyendo este sitio (A List Apart)

2. El truco
Este truco embarazosamente simple consiste en usar una imagen de fondo repetida verticalmente para crear la ilusión de que hay columnas. Para SimpleBits, la imagen de fondo se parece a la de la Figura 2 (proporciones cambiadas para la demostración), con una decoración a la izquierda, una sección blanca para el contenido, un borde de 1px y una sección de marrón clarito para la columna de la derecha seguido de la decoración inversa a la de la izquierda.

Fig. 2

La imagen completa no es mas de unos pocos píxeles de altura, pero cuando se repite verticalmente crea la ilusión de columnas coloreadas que van hasta el fondo de la página. Independientemente de la cantidad de contenido de ambas columnas.

3. El código
Esta regla básica de CSS se le pone al elemento body:

background: #ccc url(../images/bg_birch_800.gif) repeat-y 50% 0;

Hacemos que la página entera tenga un fondo de color gris (#ccc) y lo repetimos verticalmente la imagen (repeat-y). La parte 50% 0 especifica la posición de la imagen, en este caso 50% del costado izquierdo del navegador y 0px de la parte de arriba.

4. Columnas posicionadas
Con la imagen de fondo en lugar, mi diseño esta posicionado arriba, con margin y padding para las columnas asegurándose que se van a colocar en el lugar correcto dentro de las columnas faux creadas por la imagen de fondo (Fig. 3).

Fig. 3

Es importante notar que si se desea añadir border, padding y margin, entonces todavía debemos hacer algo con respecto al deficiente modelo de cajas de IE/Win con Box Model Hacko el Mid Pass Filter de Tantek Çelik.

Alternativamente, si border o padding se pueden evitar usando márgenes, entonces el Box Model Hack no es necesario. Y si el contenido de las columnas simplemente está colocada transparentemente encima del fondo, entonces es fácil evitar el problema.

5. Lo que te sirva
Mientras yo uso “absolute positioning” para crear un diseño de dos columnas en SimpleBits, el mismo resultado se puede conseguir usando float.

La misma idea aplica: repetir la imagen verticalmente, luego “flotar” la columna en posicion para que quede encima del fondo.

6. Notas finales
Es un concepto simple, pero que puede solucionar muchos problemas y frustraciones que los diseñadores nos encontramos frecuentemente cuando diseñamos con CSS.

Autor: Dan Cederholm
Licencia Copyleft