Recursos CSS

Compatibilidad

  • Firefox 3 Correcto
  • I. Explorer 7 Atención: necesita comentarios condicionales
  • Opera 9.5 Correcto
  • Safari 3.1 (win) Incorrecto
  • Firefox 2 Correcto
  • I. Explorer 6 Atención: necesita comentarios condicionales
  • Konqueror Correcto
  • Firefox 2 (linux) Correcto
  • Correcto
  • Incorrecto
  • Atención

Columnas equilibradas

Habitualmente construimos nuestras páginas mostrando varias columnas en horizontal: una columna lateral para un menú, una central con el contenido principal, etcétera. Y es también bastante habitual que nos encontremos con un problema: ¿cómo hacer para que cuando una de las columnas crezca de alto las demás también crezcan a la par? es decir, cómo conseguir que si una de ellas crece debido a su contenido las demás también lo hagan.

Las hojas de estilo no ofrecen en general un método para conseguir esto fácilmente, por lo que tenemos que inventar alguna manera de hacerlo que además sea fácil de hacer y compatible con la mayoría de los navegadores modernos.

Por otro lado, hay infinidad de modelos sobre los que hacer esto y varias maneras de resolverlo. Aquí tienes un ejemplo de cómo hacerlo con dos columnas algo separadas entre sí, sin usar imágenes.

Si deseas leer una explicación más detallada de cómo está hecho, sigue el enlace del submenú de arriba y te llevará al artículo completo.

Ver ejemplo

Explicación

Esta es una de las cosas que más dudas y consultas suscita en los foros dedicados a la maquetación mediante CSS: cómo conseguir que teniendo dos o tres columnas, todas crezcan a la par cuando el contenido de una de ellas crece. Y es que no es complicado en absoluto, pero ahí está nuestro buen enemigo Internet Explorer 6, para entretenernos un poco y obligarnos a pensar (gracias, Bill).

Olvidándonos de IE6 la cosa sería todavía más sencilla porque todos los navegadores saben dimensionar cajas con posición absoluta en arreglo a las coordenadas top y bottom, o bien saben usar display table y display table-cell, por ejemplo, pero desgraciadamente el susodicho IE6 no sabe usar ningua de esas cosas, por lo que nos da al traste con el diseño si queremos que sea lo más compatible posible.

He visto varias soluciones, pero algunas no funcionan en todos los navegadores y otras son un tanto enrevesadas, y luego producen otro tipo de problemas. La que os voy a presentar es una solución sencilla, y compatible con todos los navegadores con los que la he probado, que relacionaré al final del artículo.

Existen infinidad de variantes en cuanto al asunto de conseguir que nuestras columnas queden equilibradas cuando una de ellas crece: dos columnas juntas, tres columnas con la central líquida, dos columnas separadas entre sí, etcétera. La solución que voy a explicar se refiere a dos columnas que queden separadas entre sí.

Dos columnas separadas

Para conseguir el efecto de dos columnas que queden separadas entre sí, en realidad usaremos un truco sencillo y bonito, con un borde de una de ellas del mismo color del fondo. Pero empecemos por el principio. Lo que vamos a hacer es poner una primera caja con un indentificador:

<div id="caja_izq">

a la que daremos un color cualquiera de fondo, un ancho fijo (width:850px), un margen superior de 20px y un margen lateral "auto" para centrarla en la pantalla:

#caja_izq {width: 850px;
margin: 20px auto;
color:#fff;
background-color: #4c9ab1;
overflow: auto;
}

A continuación colocamos dentro de ésta otra caja que será la que simulará la columna derecha:

<div id="caja_der">

Para eso le daremos otro color diferente de fondo, la flotaremos a la derecha (float: right), le daremos el ancho que nos interese (width: 500px), y aquí es donde aplicaremos el truco del borde para que parezca que la columnas están separadas, dando un borde izquierdo del tamaño de la separación entre columnas que queramos y del color del fondo de la página (en este caso blanco):

#caja_der {width: 500px;
float: right;
background-color: #82b04d;
border-left: solid 30px #fff;
}

Hasta ahora todo muy sencillo. Como ambas cajas están todavía abiertas, lo que pongamos dentro aparecerá confinado en la columna derecha. Vamos a añadir pues dos bloques de texto en dos cajas diferentes para ver qué ocurre:


<div class="columna_izquierda">
Lorem ipsum dolor sit amet, consectetuer adipiscing...
...</div>

<div class="columna_derecha">
Lorem ipsum dolor sit amet, consectetuer adipiscing...
...</div>

Y ahora sí ya cerramos las dos primeras cajas seguidas

</div>
</div>

Estas dos columnas con el contenido quedan una encima de la otra en vertical, en la parte derecha, dentro de nuestra columna simulada. Entonces lo que vamos a hacer es en primer lugar, dar a la columna izquierda un ancho parecido al bloque de fondo que ha quedado a la izquierda, para acomodarla dentro (width: 280px), la flotaremos a la izquierda (float: left), y lo más importante, le daremos un margen izquierdo negativo para que se desplace sobre la columna izquierda (margin-left: -350px):

.columna_izquierda {width: 280px;
float: left;
padding: 20px;
margin-left: -350px;
position: relative;
}

Pero todavía no está todo hecho; nos falta colocar correctamente la columna derecha. Para eso le daremos también una anchura (width: 450px;), y la flotaremos también a la izquierda:

.columna_derecha {width: 450px;
float: left;
padding: 20px;
}

A ambas columnas les damos un relleno para que no se peguen a los bordes (padding: 20px). Y ya está.

Pero... ¿por qué si crece el contenido de una de las columnas la otra también crece? Muy simple: porque en realidad las dos columnas de contenido están dentro de la segunda caja (aunque el bloque izquierdo esté desplazado), que a su vez está dentro de la primera. Es decir: cuando una columna de contenido crece, como ambas están dentro de la caja derecha, ésta crecerá, sea la que sea la que lo haga; y al mismo tiempo, como la supuesta columna izquierda en realidad es la parte de la primera caja (izquierda) que queda visible, y todo lo demás está dentro de ella, crezca lo que crezca ella también lo hará. Sencillo, ¿no?

Como habéis visto, el truco para que den sensación de columnas separadas es colocar un borde izquierdo a la caja de la derecha del mismo color que el fondo, por lo que parece haber un corte entre ellas, cuando en realidad están juntas.

He visto que mucha gente tiene una gran afición a llamar a las cosas "Solución definitiva", y cosas por estilo. Creo que esta es una buena solución, pero como todo, no funcionará absolutamente siempre, sino que habrá de adaptarse a cada caso concreto con mucho cuidado, e incluso puede que haya situaciones en las que no sirva de nada.

Un poco de paciencia e imaginación serán tus mejores aliados para conseguir este mismo efecto en casi cualquier situación que se te presente.

Este código ha sido probado y funciona correctamente en los navegadores Firefox 2 y 3, Explorer 6 y 7, Opera 9.5, Safari 3.1 Windows, Firefox 2 y 3 Linux y Konkeror.

No utiliza ningún tipo de hack ni trucos exclusivos. Una de las cosas que más me gusta es intentar conseguir código compatible que evite la necesidad de usar cosas raras para diferentes navegadores.

Espero que te resulte útil. Saludos.

Ver ejemplo

Código CSS

El código CSS completo es simplísimo, y se encuentra insertado en el html:


<style type="text/css">
#caja_izq {width: 850px;
margin: 20px auto;
color:#fff;
background-color: #4c9ab1;
overflow: auto;
}
#caja_der {width: 500px;
float: right;
background-color: #82b04d;
border-left: solid 30px #fff;
}
.columna_izquierda {width: 280px;
float: left;
padding: 20px;
position: relative;
margin-left: -350px;
}
.columna_derecha {width: 450px;
float: left;
padding: 20px;
}
</style>
Ver ejemplo

Código HTML

Y la estructura del html sin contenido también es muy simple:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Columnas equilibradas</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="caja_izq">
	<div id="caja_der">
		<div class="columna_izquierda">Lorem ipsum...
		</div>

		<div class="columna_derecha">Lorem ipsum dolor...
		</div>
	</div>
</div>
</body>
</html>
Ver ejemplo