title: Fix footer to bottom of page
body: <p>Although most pages on my site have enough content to push the footer to the bottom of the page for most people. I would like to know it's always fixed to the bottom regardless of screen size from now on anyway.</p>
  
  <p>I've tried a number of ways such as bottom: <code>0x;</code> <code>position:absolute:</code> etc. Never seems to work very well, occasionally pushes the footer out of its container to fix to the bottom using some of those examples right there.</p>
  
  <p>Included is the HTML and CSS for the two parts of the footer (footer &amp; copyright bar). They're both inside of a <code>&lt;section id="footer"&gt;</code> <code>div</code> anyway.</p>
  
  <p>I removed my attempts at getting it to stick so people can have a look at it right now and see what the current code is to amend.</p>
  
  <p>Live URL - <a href="http://www.mangdevelopment.co.uk/nakedradish">http://www.mangdevelopment.co.uk/nakedradish</a></p>
  
  <p>(It's a resturant website. Don't worry about the word 'naked').</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;section id="footer"&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="span1"&gt;
          &lt;div id="small-logo"&gt;
            &lt;img src="img/small-logo.png" /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="span2"&gt;
          &lt;div class="footer-list"&gt;
            &lt;h6&gt;OUR BOXES&lt;/h6&gt;
            &lt;ul&gt;
              &lt;a href="#"&gt;
                &lt;li&gt;Classic Box&lt;/li&gt;
              &lt;/a&gt;
              &lt;a href="#"&gt;
                &lt;li&gt;Vegetarian Box&lt;/li&gt;
              &lt;/a&gt;
              &lt;a href="#"&gt;
                &lt;li&gt;Family Box&lt;/li&gt;
              &lt;/a&gt;
              &lt;a href="#"&gt;
                &lt;li&gt;Dinner Party Box&lt;/li&gt;
              &lt;/a&gt;
              &lt;a href="#"&gt;
                &lt;li&gt;Gift Box&lt;/li&gt;
              &lt;/a&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="span2"&gt;
          &lt;div class="footer-list"&gt;
            &lt;h6&gt;OUR RECIPES&lt;/h6&gt;
            &lt;ul&gt;
              &lt;a href="#"&gt;
                &lt;li&gt;Last Weeks Feature&lt;/li&gt;
              &lt;/a&gt;
              &lt;a href="#"&gt;
                &lt;li&gt;Next Weeks Feature&lt;/li&gt;
              &lt;/a&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="span2"&gt;
          &lt;div class="footer-list"&gt;
            &lt;h6&gt;ABOUT US&lt;/h6&gt;
            &lt;ul&gt;
              &lt;a href="#"&gt;
                &lt;li&gt;The Food&lt;/li&gt;
              &lt;/a&gt;
              &lt;a href="#"&gt;
                &lt;li&gt;How We Sourcex&lt;/li&gt;
              &lt;/a&gt;
              &lt;a href="#"&gt;
                &lt;li&gt;Sustainability&lt;/li&gt;
              &lt;/a&gt;
              &lt;li&gt;&lt;a href="about.html"&gt;About Us&lt;/a&gt;&lt;/li&gt;
              &lt;a href="#"&gt;
                &lt;li&gt;Contact Us&lt;/li&gt;
              &lt;/a&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="span5"&gt;
          &lt;div id="twitter"&gt;
            &lt;img src="img/twitter-logo.png" alt="" title="" height="50" width="50" class="twitter-logo" /&gt;
            &lt;div class="tweet-bg"&gt;
              &lt;div class="tweets"&gt;
                &lt;p&gt;@chefallanp that's just not on really&lt;/p&gt;
              &lt;/div&gt;
              &lt;div id="follow-btn"&gt;
                &lt;img src="img/follow-us.jpg" /&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="checkout-options"&gt;
            &lt;h6&gt;SECURE CHECKOUT&lt;/h6&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;img src="img/solo-logo.png" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="img/switch-logo.png" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="img/maestro-logo.png" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="img/visa-logo.png" /&gt;&lt;/li&gt;
              &lt;a href="#"&gt;
                &lt;li&gt;&lt;img src="img/facebook-logo.png" /&gt;&lt;/li&gt;
              &lt;/a&gt;
              &lt;a href="#"&gt;
                &lt;li&gt;&lt;img src="img/twitter-logo-flat.png" /&gt;&lt;/li&gt;
              &lt;/a&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="copyright-bar"&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="copyright-content"&gt;
          &lt;div class="span4"&gt;
            &lt;p&gt;The Naked Radish Limited. 2013 All rights reserved.&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="span4 offset4"&gt;
            &lt;div class="copyright-list"&gt;
              &lt;ul&gt;
                &lt;a href="terms.html"&gt;
                  &lt;li&gt;Terms &amp;amp; Conditions&lt;/li&gt;
                &lt;/a&gt;
                &lt;a href="privacy.html"&gt;
                  &lt;li&gt; - Privacy Policy&lt;/li&gt;
                &lt;/a&gt;
                &lt;a href="#"&gt;
                  &lt;li&gt; - Cookie Policy&lt;/li&gt;
                &lt;/a&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#footer {
      background-color: #F3F3F3;
      padding-top: 10px;
      padding-bottom: 0px;
  }
  </code></pre>