footer가 CONTENTS 위를 살짝 덮게하려고 하거든요

하는 가장 큰 이유는 드랍쉐도우.. 그림자때문에 하는건데요..

저 나름대로 인터넷에서 찾아서 해봤는데 정상적으로 되지 않아서... 뭐가 문제인지 알고 싶습니다..ㅜ

<!-- style.css -->
#aniview { margin: 0px; padding: 0px; background-color:#FFFFFF; }

#aniview #contents-area { margin-top: 20px; width: 958px; }

#aniview #submenu { width: 190px; height: 100%; background-image:url(../images/aniview_sub.png); background-repeat: no-repeat; float:left;}
#aniview #submenu .contents{ width: 170px; height:100%; margin-top: 81px; border-width:1px; border-color:#f6f6f6; border-style:solid; border-top-width: 0px; }

#aniview #sub_contents { width: 768px; background-image:url(../images/content_sub_bg.png); background-repeat: no-repeat; float: left; }
#aniview #sub_contents .contents{ width: 750px; margin-top: 8px; border-left-width:1px; border-left-color:#f6f6f6; border-left-style:solid; border-right-width:1px; border-right-color:#f6f6f6; border-right-style:solid; text-align: left; }
#aniview #sub_contents .data { padding: 20px; }
#aniview #bottom_bar { clear: both; width: 100%; height: 80px; left: 0px; padding-top: 20px; background-image:url(../images/bottom_bg.png);  position: absolute;}
#aniview #bottom_bar .footer { width: 940px; text-align: left; }


<!-- javascript -->
<script>
onload = function (){
//footer 정보
  var objSet   = document.getElementById("bottom_bar"); 
//컨텐츠 총 높이 사이즈 구하기
  var objTarHeight = document.getElementById("sub_contents").offsetHeight;

//footer 위치 정해주기
   objSet.style.top= objTarHeight-100 + "px";
}
</script>


<!-- HTML -->
<div id="aniview">
	<div id="contents-area">
		<div id="submenu">
			<div class="contents"></div>
		</div>
		   
		<div id="sub_contents">
			<div class="contents"><div class="data">{$content}</div></div>
		</div>
	</div>
	
	<div id="bottom_bar">
		<div class="footer"><img src="../images/footer.png" width="331" height="58" /></div>
	</div>
</div>

값은 정상적으로 받아오는데 위치를 변경시켜주진 않더라구요..

뭐가 문제인지 궁금합니다..