Footer stick to bottom, Extends beyond page

Trying to make the footer stick to the bottom and the content become automatically centered in between the header and footer.

Currently using this technique: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

But my footer appears way below and creates a huge gap in between.

Website: Stingrayimages.ca

Edit: So i managed to get the footer to stick to the bottom. However, the footer is not at the bottom of the page, it leaves a little bit of a scroll. And when shrink开发者_JS百科 the window, the footer doesnt stop where the content.

Also i cant get the content div to stay in the middle without messing everything up.

Your container div should wrap your Head div. I think you mistook Ryan's head area for what designers commonly refer to as the header of the page, when in fact in the example it's the head element of the html. The extra space on the bottom is likely equal to the height of your head div.

In the sticky footer, remember, the container wraps all body content but the footer.

If you are using the same technique as the link, you are missing position at the footer.

And still, with the example you linked, see the structure:

<style type="text/css">
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}
</style>
<div class="wrapper">
  <div class="header"></div>
  <div class="push"></div>
</div>
<div class="footer"></div>

But i would rather go with something like this:

<style type="text/css">
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

div#container {
    position: relative;
    margin: 0 auto;
    height: auto !important;
    height: 100%; /* IE6: min-height*/
    min-height: 100%;
}

div#header {

}

div#content {
    padding: 1em 1em 5em;
}

div#footer {
    position: absolute;
    width: 100%;
    bottom: 0;
}
</style>
<div id="container">
  <div id="header"></div>
  <div id="content"></div>
  <div id="footer"></div>
</div>