Unusual footer behavior

The footer of my page seems to be acting up. The height of the page expands with jquery, and more content becomes visible. But, the footer seems to scroll down only so far and then stop to where it's covering content instead of sitting at the bottom as it should. My code may be a little sketchy, as I am still getting everything together and haven't had time to make it look pretty

CSS for footer div:

#footer{
position:absolute;
margin-bottom:0px;
margin-top:150px;
margin-left:auto;
width:100%;
height:380px;
padding-top:20px;
background-color:#0F0F0F;
background-image:url(images/footBack.jpg);
background-repeat:repeat;
}


URL to the page:http://www.mattboldt.com/2.0

Click on the first box on the left titled "web"

Any help would be great.

Thanks

Well you don't assign any bottom or left values to your footer. The left one isn't that big of an issue but the bottom one is. Why is your footer position:absolute anyways if it is supposed to be at the bottom of the content? Are you trying to do a sticky footer type thing? Even if you did specify bottom, it would only be of the body element which in this case is just the height of the window, not your content. I use this for sticky footers.

http://www.cssstickyfooter.com/

Thank you! The sticky footer method worked perfect. What I was trying to do is keep the footer out of sight until you scroll down, or click the contact button that scrolls down to it. Now, no matter what screen resolution, it works perfectly!

That's the reason I had the absolute positioning going on, is because if I didn't the footer would not have stuck to the bottom and adapted to the lack of content.

Thanks again.