title: force footer to bottom of page for short pages in my wordpress
body: <p>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.</p>
  
  <p>I tried ryanfait option (<a href="http://ryanfait.com/resources/footer-stick-to-bottom-of-page/" rel="nofollow">http://ryanfait.com/resources/footer-stick-to-bottom-of-page/</a>) but I cannot see how to make it work with my current theme.</p>
  
  <p>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.</p>
  
  <p>My current site is: <a href="http://goo.gl/PO3OYo" rel="nofollow">http://goo.gl/PO3OYo</a> and you can see on the front page what I mean about the footer not being right...</p>
  
  <p>My site html is basically this:</p>
  
  <pre><code>&lt;body&gt;
    &lt;div id="wrap"&gt;
      &lt;div id="header"&gt;&lt;/div
      &lt;div id="nav"&gt;&lt;/div&gt;
      &lt;div id="inner"&gt;&lt;/div&gt;
      &lt;div id="footer" class="footer"&gt;&lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>and the CSS is</p>
  
  <pre><code>* { 
      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 */
  }
  </code></pre>
  
  <p>Do you have any ideas how I can get it to work without the position: absolute?</p>