Hola Mik.
Te pongo el código que tengo ahora mismo (he partido de éste último que has puesto por verlo más claro) y le he realizado algunos cambios. Por ejemplo quitarle todos los height: 100%, y le he puesto algo de contenido a las dos columnas, para que no ocupen el mismo alto.
Código:
<!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></title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
#col_izq {float: left; width: 200px; background-color: #f0f;}
#col_der {background-color: #f00; margin-left: 210px;}
</style>
</head>
<body>
<div id="contenedor">
<div id="col_izq">
COL_IZQ<br />
COL_IZQ<br />
COL_IZQ<br />
COL_IZQ<br />
COL_IZQ<br />
</div>
<div id="col_der">
COL_DER<br />
COL_DER<br />
COL_DER<br />
COL_DER<br />
COL_DER<br />
COL_DER<br />
COL_DER<br />
COL_DER<br />
COL_DER<br />
</div>
</div>
</body>
</html>
También he añadido el MARGIN-LEFT a la columna de la derecha, porqué si no, efectivamente al ser más alta el resto del contenido se veía debajo de la columna izquierda.
Ahora, tal cual está el código, sólo falta un detalle, que me gustaría conseguirlo de la forma más elegante posible.
Se trata de que las dos columnas tengan la misma altura. Dicho de otro modo, que la columna izquierda se alargue hacia abajo, hasta llegar donde termina la columna derecha. O también a la inversa, que si la que tiene más contenido es la izquierda, la columna derecha se alargue hasta el final también.
Cuál sería la forma (con CSS) de conseguir esto, y que fuera con un codigo lo más estándar posible y compatible con todos los navegadores?
Gracias por compartir la sabiduría.
Saludos.