Pues mira, me he picado y creo que he encontrado una solución al asunto de que la altura sea dinámica. Mira este código.
Código:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#contenedor { margin: auto;
width: 960px;
background-color: rgb(0, 0, 0);
}
#cuerpo { margin: auto;
width: 960px;
color: rgb(84, 98, 125);
background-color: rgb(0, 0, 0);
}
#lateral { margin: 0pt 0pt 0pt 0px;
background-color: rgb(255, 255, 0);
float: left;
width: 190px;
height: 340px;
}
#otrolado { margin: 0pt 0pt 0pt 0px;
width: 10px;
height: 340px;
background-color: rgb(255, 0, 0);
position: relative;
float: right;
}
#principal { margin: -340px 10px 0pt 190px;
background-color: rgb(170, 170, 255);
width: 760px;
}
.clear {
clear: both;
}
</style>
<title>111</title>
</head>
<body>
<div id="cuerpo">
<div id="lateral"></div>
<div id="otrolado"></div>
<br class="clear" />
<div id="principal"><br />
<br />
<br />
<br />
hola
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
</div>
</body>
</html>
Lo que he hecho ha sido hacer una nueva clase (clear) para meterle un corte al div central y luego mandarlo arriba dándole un margen negativo igual al tamaño de los otros divs. Funciona bien en firefox y IE.
Como dices, qué coñazo el asunto de los navegadores. ¿Para qué demonios está el W3C?
Por cierto: yo no tengo ningún problema en maquetar con tablas. No sé si es moda, que es mucho peor o lo que sea, pero siempre lo he hecho y funciona en general de maravilla.
Mikel.