force footer to bottom of page for short pages in

I've got a website which I'm still playing with and editing however I'm a little lost with trying to make a footer stick to the bottom of the screen.

I tried ryanfait option (http://ryanfait.com/resources/footer-stick-to-bottom-of-page/) but I cannot see how to make it work with my current theme.

I then tried a different method using absolute position etc but it placed the footer in the middle of the page on my long pages so clearly that wont work.

My current site is: http://goo.gl/PO3OYo and you can see on the front page what I mean about the footer not being right...

My site html is basically this:

<body>
  <div id="wrap">
    <div id="header"></div
    <div id="nav"></div>
    <div id="inner"></div>
    <div id="footer" class="footer"></div>
 </div>

and the CSS is

* { 
    margin: 0;
}

html {
    margin: 0;
    padding: 0;
    height:100%;
}

body {
    background: #000000 url(images/bg.jpg) top center no-repeat;
    color: #444444;
    font-size: 12px;
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Helvetica, sans-serif;
    margin: 0 auto 0;
    padding: 0;
    line-height: 21px;
    height:100%;
}

#wrap {
    height:auto !important;
    margin:0 auto;
    min-height:100%;
    padding:0;
    position: relative; */ I tried this but it breaks long pages */
}

#inner {
    background: #FFF;
    width: 900px;
    margin: 0 auto 0;
    padding: 30px;
    overflow: hidden;
}

#footer {
    background: #161616;
    color: #666666;
    margin: 0 auto 0;
    padding: 20px, 0, 0, 0;
    clear: both; 
    overflow: hidden;
    border-top: 1px solid #222222;
    height: 40px;
    bottom: 0;
    left: 0;
    width: 100%;
    position: absolute; */ I tried this but it breaks long pages */
}

Do you have any ideas how I can get it to work without the position: absolute?

Come on dude, you were so close!

Make sure you follow the same structure:

<body>
    <div id="wrap">
      <div id="header">fdsf</div>
        <div id="nav">ffd</div>
        <div id="inner">
          content here...
        </div>
        <div class="push"></div>            
    </div>
    <div id="footer" class="footer">footer</div>
</body>

Then from ryan fait's

#wrap {
min-height: 100%;
  height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
  height: 100%;
  margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}

.footer, .push {
  height: 155px; /* .push must be the same height as .footer */
}

#footer {
  background: #161616;
  color: #666666;
  margin: 0 auto 0;
  padding: 20px, 0, 0, 0;
  clear: both; 
  overflow: hidden;
  border-top: 1px solid #222222;
  width: 100%;
}

Example: http://codepen.io/EightArmsHQ/pen/YPymWV

I'd really advise having a muck about with my code in Codepen, just to get to grips with it. I sticky footer every footer I've ever made, and it still gets the better of me some times so just keep at it. There will also always be occasions when the above doesn't quite work...