Bueno.
Creo que para empezar. "#centrar" no debería ser selector de
id sino de clase. O sea debería estar asi ".centrar".
Ya que solo le asignas una propiedad y quizás la necesites para otros bloques.
Ahora.
Te recomiendo que definas el ancho con la propiedad "width: ".
Ésta puede estar en porcentajes (ej: 100%, 50% ...) o en pixeles (ej: 400px, 500px, ...)
Eso ayudaría en algo.
Ahora. El "margin: auto " que le asignas al footer hace que se centre. (Al menos eso tengo en mente).
Lo más probable es que se coloque uno sobre el otro por que son
bloques.
podrías establecerlos en linea con una propiedad llamada "display: inline", pero esto haría que se coloquen en la misma fila y pegados hacia la izquierda. Así que tendrías que asignarles la propiedad "display: inline-block".
Debería quedar así.
Código:
.centrar, footer
// no confundir " .centrar footer" se utiliza
//la coma para "seleccion multiple"
{
display:inline-block;
}
footer
{ ...
width: 40%; //Luego tendrias que jugar con los valores...)
...}
.centrar //cambia el "#" por "."
{...
width: 60%;
...}
Realiza las modificaciones. Si deseas que quede mas estético tu código.
Encierra a las etiquetas "footer" y al "div" que dentro de otro <div> que podría llevar como id "pie" (osea id="pie")
Espero te sirva.