Esta es una de las cosas que más dudas y consultas suscita en el foro de 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.
Existen infinidad de variantes en cuanto al asunto de conseguir que nuestras columnas queden equilibradas cuando una de ellas crece: la solución que presento se refiere sólo a dos columnas que queden separadas entre sí.
Cita: <!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" />
<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>
</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>
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.
Si alguien desea leer una explicación más detallada del por qué de las cosas, puede bajarse libremente el archivo zip que he enlazado
en las FAQ de CSS, que contiene el ejemplo con contenido y un artículo que explica todos los detalles del código.
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 vuestros mejores aliados para conseguir este mismo efecto en casi cualquier situación que se presente.