margin en el pie de pagina

[DaChux]

Veamos, estoy haciendo unas pruebas, pongo un ejemplo resumido:

Código:

body{
	margin:0;
	padding:0;
}
*{
	margin:0;
	padding:0;
}
#contenedor {
	width:500px;
	margin:0 auto;
	background:blue;
	padding:0;
	position:relative;
}
#columna {
	width:200px;
	float:left;
	background:red;
	margin:0;
	padding:0;
	position:relative;
}
#contenido {
	width:300px;
	float:right;
	background:green;
	margin:0;
	padding:0;
	position:relative;
}
#footer{
	margin:10px 0 0 0;
	padding:0;
	background:yellow;
	position:relative;
	clear:both;
}

y luego el html

<div id="contenedor">
<p>pondre algo de contenido en layer 1, para que estire y ver que pasa</p>
<div id="columna">
<p>estoi dentro de la columna</p>
</div>
<div id="contenido">
<p>estoi dentro dle contenido</p>
</div>

</div>
<div id="footer">
<p>estoy en el footer</p>
</div>

Bien veamos, esto deberia de mostrarme un bloque gris, debajo uno rojo y otro verde, y en el pie de la pagina, un bloque verde separado 10 px de los anteriores. En explorer lo veo bien, pero en firefox no. Simplemente, el tamaño de la capa que hace de contenedor no se estira lo mismo que lo hagan las capas que tiene dentro, por lo tanto los 10 px de margen me los toma de una posicion que no es la correcta.

Sugerencias?

Gracias gente