Footer not sticking to bottom

I'm having trouble with my footer sticking to the bottom of my blog entire pages. I run into two issues. First if I use position:absolute the footer rises to about the middle of the main blog page. If I leave that alone, it sticks to the bottom but rises to the middle on the blog entire pages. Footers are something I always have trouble with.

Here's my current CSS style for the footer

footer {
text-align: left;
background-color: #f4f4f4;
padding-top: 40px;
padding-bottom: 40px;
z-index: 1;
bottom:0;
width:100%;
}

Here's a link to the page http://pixelogicblog.tumblr.com/post/41025998534/tes-post

Check out sticky footer solutions using CSS:

http://ryanfait.com/sticky-footer/

The reason your footer is only halfway down the page with position: absolute is that you haven't set a min-height on the body and html elements. Without that, the body only takes up as much space as you have content for it -- and then the footer is aligned with that bottom, not the bottom of the window.

Try adding this to your CSS to make it take up at least the height of the window:

html, body {
    min-height: 100%;
}

Have you seen this?

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

Cross browser (IE6+ too) and easy to understand.

Coincidentally, your current footer isn't appearing at the bottom of the page as its position is set to relative, set its position to absolute and it will be positioned at the bottom of the page (as long as the page is no longer than the viewport). Relative positioning only sets an elements position relative to where it would be normally, for example if you set bottom: -10px on the footer element, then it would appear 10 pixels lower than it would otherwise have done (hope I'm making sense there!)

If you position something absolutely, it is positioned absolutely to either the body tag, or the next nearest parent with a position set to relative (as I understand it anyway)