entre varias cosas, si le das posición absoluta al div, tienes que indicarle en que posicion va a ir y no lo has hecho
Cita: .footer {
background-color: #0F9;
height: 50px;
position: absolute;
width: 100%;
bottom: 0px;
}
La posición absoluta la toma de la totalidad del espacio en pantalla y no del div en el que está. Intenta mejor con una posicion relativa
Cita: .footer {
background-color: #0F9;
height: 50px;
position: relative;
margin: 0 auto;
width: 100%;
}