Und noch besser, anstatt top:-39px (was die echte Höhe behält) margin-top:-39px (hiermit wird die Höhe neu berechnet) ;-)
Sieht also nun so aus:
<div id="main" style="border:1px solid #FF0000;color:#000000;margin-left:63px;width:962px;background-color:white">
<div id="header" style="position:relative;top:0px;margin-top:-39px;height:245px;"></div>
<div id="middle" style="position:relative;top:0px;height:253px;"></div>
<div id="footer" style="position:relative;top:0px;height:26px;"></div>
</div>