1. A commonly used "sticky footer" tutorial is here:-
http://www.cssstickyfooter.com/
2. The height of your page will either be determined by the height required for the content (it may be slightly different for different browsers) or you put the whole content inside a wrapper div which has a height.
3. Your #header div has a height of 226px
Code:
#header{
background-image: url(images/logo.png);
height: 226px;
width: 777px;
left: 0px;
top: 0px;
}
The height of logo.png is 196px so you could edit the #header height to 196px for a start. If you decrease the #header height to less than 196px the logo background image will start to get cut off at the bottom, but you have scope to allow that.
Code downloaded to my PC will be deleted in due course.
WIN7; IE9, Firefox, Opera, Chrome and Safari for Windows; screen resolution usually 1366*768.
Also IE6 on W98 with 800*600 and IE8 on Vista 1440*900.