fixed header and footer issues

Question

I am currently working on a website design using the 960 grid system and came across a small snag in the final moments of the design. Ultimately, I just want to set my header and footer bars to be 'fixed' on the page, so that they will remain stationary even when the rest of the page is scrolling. Here is a great example of a fixed navigation bar. http://ryanscherf.net/ Mine wont be vertical, but you get the point.

The problem that I am coming across is that the header works perfectly, and exactly the way I suspect it will. Here is the HTML for my header

<div id="header">
    <p>
        ATS Logo
    </p>
</div><!--end header-->

and the css to make it stretch and fix the position

 #header
{
background:grey;
width:100%;
height:65px;
position:fixed
/*padding:15px;*/
}

This solution works exactly the way i want it too. However, when i apply the same exact settings to the footer, it causes undesired results. Here is a fiddle to show what I mean. You will have to uncomment the 'position:fixed' line for the footer to see what i mean. http://jsfiddle.net/s4cWP/ and full screen http://jsfiddle.net/s4cWP/embedded/result/

Its worth noting that in addition to using my own css (located at the top of the jsFiddle!) i am using the 960 reset grid and 960 12 column style sheet.

I would really appreciate a push in the right direction. Is there something im not accounting for here?

Thanks!

Answer 1

I'm assuming you want the footer to always appear like the header: JSFiddle.

New #footer:

#footer
{
    background:grey;
    width:100%;
    position:fixed;
    bottom:0;
    left:0;
}

Also, due to overlapping, I added padding to the bottom of the #container:

#container
{
    padding-top:75px;
    padding-bottom:30px;
}