🚀 go-pugleaf

I hope someone here can help. I've been developing a series of 
scripts for a web page. The web page has some embedded javascript
that creates a div tag to scroll the window as well as a div tag 
that puts a footer on the absolute bottom of the window:

<SCRIPT TYPE='text/javascript'>
var winW=0,winH=0,head,foot;

if( typeof( window.innerWidth ) == 'number' ) 
{ //Non-IE
  winW= window.innerWidth;
  winH= window.innerHeight;
} 
else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) 
{ //IE 6+ in 'standards compliant mode'
  winW= document.documentElement.clientWidth;
  winH= document.documentElement.clientHeight;
} 
else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) 
{ //IE 4 compatible
  winW= document.body.clientWidth;
  winH= document.body.clientHeight;
}

head=winH-180;
foot=winH-20;
footW=(winW-750)/2;
if(footW<0) footW=0;

var _header="<DIV STYLE='overflow: auto; height: "+head+"px; width:100%'>";
var _footer="<DIV STYLE='position: absolute; top: "+foot+"px; left : "+footW+"px; height: 15px; align: center; width: 750px; background-color: #1174b0; color: yellow; text-align: center; font-size: 10pt'>&copy; Copyright 2006, Plano Citizens Police Academy<\/div>";
document.write(_footer);
document.write(_header);
</SCRIPT>

Everything appears 100% correct in FireFox, Opera, Safari, and
sometimes in IE. However, I have one page that creates a roster
(which is simply a table with approximately 150 rows). When
this page is generated, it sometimes appears far below the footer
instead of directly after the header.

Any ideas?