Mantener el div "pie" siempre debajo del "menú" y del "cuerpo"

[jpinedo]

Hola:
Aunque he utilizado bastante el CSS, nunca lo había hecho demasiado en serio. Así que ahora quiero hacer un diseño típico con cabecera, menú, cuerpo y pie.

El HTML tiene esta estructura

Código HTML:

<div id="cabecera">Lo que va en la cabecera</div>
<div id="navegacion">Una lista de enlaces aquí</div>
<div id="cuerpo">Aquí el cuerpo</div>
<div id="pie">Lo que va en el pie</div> 

Lo que quiero es que el menú ("navegación") quede a la izquierda del "cuerpo" y el "pie" debajo de ambos.

Intenté esto:

Código:

#navegacion {
	float: left;
}

También esto

Código:

#navegacion {
	position: absolute;
	left: 0px;
	width: 190px;
}
#cuerpo {
	margin: 0px 0px 0px 190px;
}

Ambas cosas funcionan siempre que el menú sea más pequeño que el cuerpo. Pues el "pie" siempre se sitúa inmediatamente debajo de "cuerpo".

Lo que necesito es que "pie" se sitúe siempre debajo del elemento más largo (navegacion o cuerpo). Y también quisiera saber si se puede hacer que el div más corto entre ambos siempre se prolongue hasta el tamaño del más largo. (supongo que esto solucionaría lo anterior)

Espero que se haya entendido.

Saludos

[baccxus]

este es un esquema básico que me funciona de maravilla:

#encabezado {
position:relative;
width:100%;
height:115px;
z-index:1;
}
#navegacion {
position:relative;
width:20%;
z-index:2;
float:left;
}
#contenido {
position:relative;
width:80%;
z-index:3;
float:right;
}
#pie_de_pagina {
position:relative;
width:100%;
height:25px;
z-index:4;
}

[safe]

al pie de pagina ponele "clear: both"... le dice que no flote alrededor de otro div flotante, sino que se situe debajo.

[jpinedo]

Muchas gracias.
Voy a probar las soluciones que me han dado.
Saludos