Un completo curso de diseño gráfico, ilustración, diseño web y tipografía.

Falsas columnas en CSS

por Dan Cederholm

Una de las cuestiones que más me preguntan sobre el diseño de mi sitio personal es la siguiente:

¿Cómo consigues que el fondo de color de la columna derecha se extienda hasta abajo del todo en la página?

Es un concepto sencillo, realmente es uno que muchos ya conocerán. Pero para aquellos que todavía no lo conocen, esta técnica puede ser un truco útil.

Alargar verticalmente

Una de las propiedades algo frustrantes de las hojas de estilo, CSS es el hecho de que los elementos se alargan verticalmente sólo en la medida que lo necesitan. Esto quiere decir que si una imagen de 200 píxeles de alto está dentro de una división <div>, el <div> sólo se expandirá hacia abajo en la página esos 200 píxeles.

De aquí surge un interesante dilema cuando utilizas<div>s para separar secciones en tu código, y entonces les aplicas CSS para crear una maquetación en forma de columnas. Un columna puede ser más alta que la otra (ver la figura 1). Dependiendo de la cantidad de contenido que tenga dentro, resulta difícil crear una disposición con dos columnas exactamente igual de altas con un único color de fondo para cada columna.

figure 1
Figura 1

Hay varias maneras para hacer que la altura de dos columnas parezca la misma, con independencia del contenido que tengan. Aquí comparto mi solución particular (para una maquetación basada en contenedores posicionados de forma absoluta), que es terriblemente... simple. Este pequeño truco también se utiliza en otros sitios, incluyendo A List Apart.

El engaño

Este secreto tan simple es utilizar una imagen de fondo que se repite veticalmente para crear la ilusión de una columna coloreada. En SimpleBits, la imagen es algo semejante a lo que explica la Figura 2 (las proporciones son diferentes en este ejemplo), con una cinta decorativa en la izquierda, una gran sección en blanco para la columna de contenidos, un borde de 1 píxel y una sección de color ocre para el fondo de la columna derecha, seguida por un inversión del borde decorativo de la parte izquierda.

figure 2: background image for vertical tiling
Figura 2

La imagen entera no tiene más que unos pocos píxeles de alto, pero cuando se repite verticalmente, crea la columna de color que fluye hasta el final de abajo de la página,— sin que importe et tamaño el contenido de las columnas..

El CSS

Esta regla elemental de CSS se añade al elemento body:

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

Esencialmente, hacemos que la página entera tenga una imagen de fondo de color y que se repita sólo verticalmente (repeat-y). El 50% 0 se refiere a la posición de la imagen de fondo, en este caso a un 50% de la parte izquierda de la ventana del navegador (con lo que resulta que se centra en la ventana) y a 0 píxeles de la parte superior.

Columnas en posición

Con la imagen de fondo en su lugar, la maquetación se coloca encima, con espaciado interno y márgenes para las columnas de izquierda y derecha, asegurando que se alinearán en el lugar correcto — dentro de las falsas columnas creadas con la imagen de fondo (ver la figura 3).

figure 3
Figure 3

Es importante recordar que si deseamos bordes, espaciado y márgenes en ambas columnas, debemos tener en cuenta que en IE/Win se debe aplicar un arreglo del modelo de caja, como el de Tantek Çelik: Box Model Hack o el Mid Pass Filter.

Como alternativa, si prescindimos de bordes o espaciado interior empleando sólamente márgenes, entonces el model de Caja funciona y no será necesario el arreglo. Y si el contenido de la columna simplemente está de forma transparente sobre el fondo repetido, es fácil evitar este arreglo.

También se puede flotar

Aunque utilizo posicionamiento absoluto para crear una disposición en dos columnas en mi propio sitio, se pueden obtener resultados igualmente buenos con la propiedad float(como se ve en ALA).

Se aplica la misma idea: repite la imagen de fondo, seguidamente flota una columna en la posición adecuada para superponerse al falso fondo de columnas que queda detrás.

Notas finales

Es un concepto simple, pero que puede aliviar una de las principales frustraciones que los diseñadores suelen encontrarse cuando construyen compaginaciones basadas en CSS.

Gracias a Jeffrey Zeldman por su ayuda para refinar este artículo.

El diseñador, programador y bon vivant Dan Cederholm rediseñó Fast Company and Inc.com en base a los estándares web(entrevista). Publica trucos de diseño web y noticias en su sitio personal, SimpleBits.

[ Este artículo ha sido traducido con permiso de A List Apart y su autor.]