div ile otomatik sayfa yüksekliği

Ana bir div blokum var ve bunun altında footerım var.Benim istedigim ana bloka icerik girildikce footer'ın otomatik kayması.
Bunun için height özelligi vermedim ana bloka.Footera gecmeden önce float clear da ediyorum ama yine icerik footerın üzerinden gecip ilerliyor.Nasıl cözebiliriz bunu?

#header {
MARGIN: 0px auto;
WIDTH: 842px;
}

#footer {
WIDTH: 842px;
COLOR: #83817d;
POSITION: absolute;
z-index: 1;
visibility: visible;
}

<DIV id=header>
içerik.
<DIV id=footer>
footer içerik
</div>
</div>

böyle denermisin.

direk bu kod çalışıyor fakat kendi footerımı verdigin sekilde yapınca yine üstünden geciyor

buraya kopyala footerini yardımcı olmaya calısayım

POSITION: absolute; bu kodu kaldırırsan olacak bence

#referanslar{
	width:950px;
	position:relative;
	background-repeat:no-repeat;
	height:700px;
	margin-left:auto;
	margin-right:auto;
}

#referanslarch{
	width:735px;
	position:relative;
	background-repeat:no-repeat;
	
	height:650px;
	margin-left:auto;
	margin-right:auto;
	float:left;
	top: 5px;
	background-color: #FFFFFF;
}
  #footer{
	width:950px;
	position:absolute;
	background-repeat:no-repeat;
	height:35px;
	margin-left:auto;
	margin-right:auto;
	background-image: url(media/footer1.jpg);
	font-family:Verdana,Helvetica,Arial,sans-serif;
	font-size:.12px;
	text-align:right;
	color:#ffffff;
	z-index: 1;
visibility: visible;
}

ana div referanslar onun altında referanslarch var ve en alttada footer

#referanslar {
MARGIN: 0px auto;
WIDTH: 842px;
TEXT-ALIGN: left
}
#referanslarch {
POSITION: relative;
HEIGHT: auto
}
#footer {
WIDTH: 842px;
COLOR: #83817d;
POSITION: absolute;
z-index: 1;
visibility: visible;
}
<DIV id=referanslar>
<DIV id=referanslarch>
xx</DIV>
<DIV id=footer>
xxx
</DIV>
</DIV>

denedim böyle calısıyor.

sıtenın kodlarını gonder buraya halledelim

#footer{} daki position:absolute; kısmını position:relative; olarak değiştirip dener misiniz?