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:
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.<!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>
<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>
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.
Este tema le ha gustado a 1 personas