insyse:
Convengamos que tu código es un caos, y bastante dificil de analizar, asi a primera vista me parce que te sobran muchas cosas, pero veamos,
rescatemos lo siguiente
tu cabecera tiene un 100% de ancho y 55px de alto
tu contenido tiene
height:500px;
width:920px;
y aparentemente lo estás centrando con el auto en el margin
y despues queres que venga tu pie, que tiene un 100% de ancho, 100px de alto, y ponés como condicion que se mantenga visible siempre al pie de la pantalla (usas bottom: 0px; Esto último va a hacer que necesariamente, que si se ve en una resolución más baja o te redimensionan la página, el pie se encime con el contenido, no hay forma de evitarlo. De todas maneras, para eso está el scroll.
Yo te paso una estructura básica, y trata de arrancar desde ahi
Código HTML:
Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="content-type" content="text/html; charset=utf-8" />
html, body, div {
margin: 0px;
padding: 0px;
border: none;
}
div#cabecera {
width: 100%;
height: 55px ;
background-color: cyan;
}
div#contenido {
width: 920px;
height: 500px;
margin: 0px auto;
background-color: green;
}
div#pie {
width: 100%;
height: 100px;
position: fixed;
bottom: 0px;
left: 0px;
background-color: lime;
}
Saludos