problema divs sobreexpuestos

[jemoce]

Hola, estoy aprendiendo css y creandome una página de ejemplo me surge el siguiente problema:

Tengo una imagen como cabecera, el codigo css es es siguiente:
#header{
width: 811px;
height: 173px;
padding: 0px;
margin: 0px;
background: url(../images/cabecera.jpg) top left no-repeat;
}
Luego esta la parte central de la página, con el siguiente codigo:
#main{
width: 811px;
padding: 0px;
margin: 10px;
background-color: #e5e5e5;
}
Y por último tengo el pie, que es otra imagen:
#footer{
width: 811px;
height: 113px;
padding: 0px;
margin: 0px;
background: url(../images/pie.jpg) bottom left no-repeat;
}
El problema es que cuando lo previsualizo, la imagen de la cabecera y la del pie se sobreexponen, se pisan la una a la otra. Donde puede estar el problema?
Ademas cuadno le toco al margin del main, la imagen del pie se meve...me estoy volviendo loco!!!