Todo el malfuncionamiento viene de cosas como las que le resalto en negrita:
#content {
Cita: position:absolute;
bottom:0;
top:0;
right:0;
left:0;
height:100%;
min-height:100%;
padding-bottom:30px;
width:auto;
}
Los elementos posicionados con el valor absoluto salen del flujo del documento. Esto significan que el resto (incluido su padre o contenedor) se comportan como si no existiesen en algunos aspectos:
.-Como el tamaño de sus ancestros: no los fuerzan a crecer. De ahí la necesidad de tener que declarar tamaños expresamente (previo cálculo) o que haya desbordes (como le ocurre) si varían los contenidos "dinámicamente". También es el origen de tanto div de corte (clear:both) o del uso del overflow.
.-Al resto de elementos hay que modificarles su posición natural para evitar solapamientos.
Cuál es la alternativa, entonces:
.-Evitar el uso de position:absolute excepto cuando sea imprescindible.
.-Elementos con "relative", para que se vayan posicionando en su lugar correspondiente por el orden de aparición y que los demás actúen en consecuencia (tamaños, lugar donde se deben colocar, forzan el crecimiento de los ancestros... etc).
Puede ampliar información y así aplicar más correctamente las propiedades de css y evitarse problemas en los manuales de
www.librosweb.es y en "
la guía de migración sin dolor" de
Mikmoro (está entre los importantes de este foro)
P.D.: ¿Se fijó donde se entrevé su #footer? La razón, lo comentado anteriormente relativo al flujo del html. Como todo lo anterior está con absolute y ese div en relative, pues eso.