Footer için işinize yarayan değerler şunlardır :
height:220px;
position:relative;
max-width: 1200px;
width:auto;
display:block;
margin: auto;

max-width değerini sitenizin genel genişliğine göre ayarlayın. Bunu söylemeyi unuttuğum için tekrar ettim. Bunlar dışında kalan kodlar işinize yaramayacaktır. Aynı kodları diğer bölümlere de eklemeniz gerekmektedir. Diğer bölümler; header css çerçevesi ve site gövdesidir.

Header ve body çerçeveleri arasına da şu kodların aynısını ekleyin.
max-width: 1200px;
width:auto;
height:auto;
display:block;
margin: auto;
position:relative;

Ayrıca header ve body çerçeveleri arasına eklemiş olduğunuz elemanlara da padding:0.1%; kodunu ekleyin.

Header ve site gövdesine muhtemelen yükseklik değeri vermediğiniz için bu şekilde üst üste biniyorlar. Headere yükseklik değeri verebilirsiniz ama site gövdesine yükseklik değeri vermek mantıksız olur. Bu yüzden site gövdesinin içinde olan çerçevelere (yazı çerçevesi, resim çerçevesi vs.) padding:0.1%; değeri verirseniz sorununuz düzelecektir. Padding değeri dışarıda kalan çerçeveleri iteklemeye yarar. Yani body içindeki çerçeve yüksekliği belirlenmemişse bile onun içinde olan çerçevede padding değeri varsa iç çerçeveye göre yükseklik değeri kazanıır.

Büyük ihtimal böyle olmadığı için footer çerçevesi header ve body çerçevelerinin yüksekliklerini göremiyor ve onların üstüne biniyor.
Son ihtimal:
z-index: 1; değeri yüzünden de böyle olmuş olabilir. z-index değeri katmanları üst üste bindirmek için kullanılır. Gerçi position:relative olduğu için z-index elementinin çalışmaması gerekiyor ama siz yine de silin.