Problema con footer y capa desplegable

[ainvar57]

Hola tengo un problema que no entiendo, paso a explicar. Monto una estructura html de este tipo, es html5 y css3:

Código HTML:

<header>
    <div id="titulo">
      <h1>panel de control</h1>
    </div>
    <div id="navigation"></div>
</header>
<div id="content">
     <div id="cabecera"></div
     <div id="contenido"></div>
</div>
<footer>
    <div id="pie"></div>
</footer> 

Bien el caso es que el footer tiene este estilo:

Código HTML:

footer {
	border-top:2px dashed #999999;
	position:relative;
	margin:0;
	padding:0;
	width:100%;
}
footer #pie {
       padding:5px 10px;
}

el div #contenido aparece primero con display:none, pero luego cargo en el un contenido mediante ajax, y se muestra la capa con jquery - $('#contenido').slideDown(1000) -. Bueno esto funciona correctamente, se despliega la capa, el footer baja, pero cuando está todo cargado el footer vuelve a la posición inicial y monta sobre el contenido de #contenido, y no se porqué pasa esto. He probado a ponerle a #contenido un min-heigh, pero se queda ahí, en esa medida y el problema es que no se a priori el alto de esta capa, pues muestro unas fotos para editar y depende de la cantidad de fotos que haya subido el usuario, con lo que el pie debería colocarse al final del contenido siempre, sin embargo se sube. Alguna pista.

[kseso?]

Al estar en juego dos lenguajes, js y css, la información facilitada es insuficiente para poder pronunciarse.

Si tiene o puede poner la página del problema en línea y pasar el enlace ayudaría.

[ainvar57]

Hola kseso? no la tengo en linea, pero he subido una prueba para que veas lo que pasa en http://pruebas.ainvar.net/Pruebas, si pinchas en Manolito verás lo que pasa.

[kseso?]

Gracias.

Todo viene de que #container #content #editFotos ul#boxes li están flotados --> por lo que sus ancestros no crecen por más o menos li´s que haya.
Más info: buscar "limpiar float"


Añada overflow: hidden a a uno de los dos
#container #content #editFotos o
#container #content

También se arreglaría añadiendo clear: both a <footer>

Quizás deba hacer los dos añadidos (overflow y clear). No se a cuál será mejor (#editfotos o #content) pues habría que ver la página con todos los elementos para evitar efectos secundarios no deseados.

[ainvar57]

Muchas gracias kseso? con poner clear:both a footer se ve correctamente. Nunca lo hubiera descubierto por mi mismo. De nuevo gracias.