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

[Mikmoro]

Repasa tu consulta, por favor.
-el primer bloque no es gris.
-el último bloque no es verde
-el último bloque no se separa 10px de los anteriores

-"los 10 px de margen me los toma de una posicion que no es la correcta.".
¿Y cuál es la correcta?

Te sugiero que repases la consulta y la hagas más entendible.
Sólo es una sugerencia.

Mikel.

[DaChux]

Lo primero, gracias por responder.

pongo dos capturas:

firefox


Explorer


En el explorer, me toma el margin desde lo de arriba, y me deja 10 px. En firefox, es como si la capa que hace de contenedor no estirara el alto a medida que se rellena, como queda mas arriba, los 10 px no son suficientes para que se separe y por eso sale totalmente pegado. Perdon por mi explicacion de antes ;)

Bueno, un saludo

[Mikmoro]

De acuerdo, yo ahora lo veo mucho mejor

Basta con que añadas a tu selector #contenedor la propiedad overflow: auto;

#contenedor { margin: 0pt auto;
padding: 0pt;
background: blue;
width: 500px;
position: relative;
overflow: auto;
}

Ten en cuenta que esto irá bien mientras #contenedor no tenga un tamaño definido de alto, porque en ese caso cambiará el comportamiento de overflow. Si le defines un alto, deberás usar otra solución.

A ver si te sirve.

Mikel.

[DaChux]

pues mil gracias de nuevo tio ;)

Por cierto, estas cositas como te las he comentado... de donde sacas las soluciones? supongo que sera experiencia jeje

Un saludo

[Mikmoro]

Me alegro de que te funcione.
Desde luego es una cuestión de experiencia, pero también es que soy uno de esos tipos raros que cuando coge un aparato nuevo por ejemplo, antes de enchufarlo se lee todo el manual de arriba a abajo, hasta lo blanco, y luego empieza a enredarlo para descubrir las cosas que no venían en el manual.

A mi me sirvió bastante la traducción de la norma CSS, que aunque hay muchas cosas que no encontrarás y aprenderás por experiencia, sí es una muy buena referencia para hacerte una idea básica de por dónde van las cosas.

http://www.sidar.org/recur/desdi/tra...css/intro.html

Hasta la vista.

Mikel.