El pie de página está flotando a través de div

Tengo un div de contenedor con un div de pie de página colocado fuera de él. En primer lugar, mi pie de página está al otro lado de la pantalla y no quiero usar una regla "absoluta" para ubicarlo. ¿Cómo coloco el pie de página justo en la parte inferior de la página?

Código CSS:

#container{
margin:auto;
width:85%;
height:auto;
}
#header {
background-image: url('http://static.manpoints.uk.to/images/header.png');
background-repeat: repeat-x;
background-color: #dd4814;
height: 140px;
}
#footer{
background-image: url('http://static.manpoints.uk.to/images/gradient-grey.png');
background-repeat: repeat-x;
background-color: #F0F0F0;
padding: 15px;
margin-top: 30px;
height: 90px;
width: 100%;
position: relative;
} 
#content {
margin: 10px;
width: 75%;
height: 100%;
float: left;
}

Código HTML:

<div id="container">
<div id="header">
<div id="logo"><span>Earn Man Points<br>Earn Respect</span></div>
</div>
<div id="menubar" align="center">
<ul id="menu">
<li><?php menuIndex(); ?></li>
<li><?php menuUser(); ?></li>
<li><a href="/es/leaderboard/" title="View the ManPoints Leaderboard">Leaderboard</a><li>
<li><a href="/es/upload.php" title="Upload content to Man Points">Upload</a></li>
</ul>
</div>
<div id="content">
<h1>Title</h1>
<div id="image_display"><img src="img.jpg"></div>
<div id="image_info">
<h2>Man Points: 7</h2>
<p>Next Image</p>
</div>
</div>
</div>
<div id="footer">Footer Content</div>

Sitio web con problema: http://manpoints.uk.to/image/30

preguntado el 22 de mayo de 12 a las 21:05

2 Respuestas

Agregar

clear: both;

al elemento de pie de página. Es porque el contenido de arriba flota y no se ha borrado.

contestado el 22 de mayo de 12 a las 21:05

Además: contener los flotadores en su interior #container añadiendo (por ejemplo) overflow: hidden a él, y eliminar width: 100% del #footer para eliminar la barra de desplazamiento horizontal innecesaria que tiene la página. - treinta y dos

Yo tuve el mismo problema. Pude arreglarlo usando este ejemplo.

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

contestado el 22 de mayo de 12 a las 22:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.