title: Sticky CSS Footer
body: <p>Can someone help me make the original code from HTML5 Boilerplate Initializser, have the footer stick to the bottom of the browser, I've tried all manor of codes from web examples but unfortunately I think as usual the boiler plates predefined CSS is affecting the positioning and "sticking" of the footer.</p>
  
  <p>Heres my CSS:</p>
  
  <pre><code> /* =============================================================================
     HTML5 Boilerplate CSS: h5bp.com/css
     ========================================================================== */
  article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
  audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
  audio:not([controls]) { display: none; }
  [hidden] { display: none; }
  
  html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; height: 100%;}
  html, button, input, select, textarea { font-family: sans-serif; color: #222; }
  body { margin: 0; font-size: 0.9em; line-height: 1.4; height: 100%;}
  
  ::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
  ::selection { background: #fe57a1; color: #fff; text-shadow: none; }
  
  a { color: #00e; }
  a:visited { color: #551a8b; }
  a:hover { color: #06e; }
  a:focus { outline: thin dotted; }
  a:hover, a:active { outline: 0; }
  
  abbr[title] { border-bottom: 1px dotted; }
  b, strong { font-weight: bold; }
  blockquote { margin: 1em 40px; }
  dfn { font-style: italic; }
  hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
  ins { background: #ff9; color: #000; text-decoration: none; }
  mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
  pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 0.9em; }
  pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
  q { quotes: none; }
  q:before, q:after { content: ""; content: none; }
  small { font-size: 85%; }
  
  sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
  sup { top: -0.5em; }
  sub { bottom: -0.25em; }
  
  ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
  dd { margin: 0 0 0 40px; }
  nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
  
  img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
  
  svg:not(:root) { overflow: hidden; }
  
  figure { margin: 0; }
  
  form { margin: 0; }
  fieldset { border: 0; margin: 0; padding: 0; }
  label { cursor: pointer; }
  legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
  button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
  button, input { line-height: normal; }
  button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
  button[disabled], input[disabled] { cursor: default; }
  input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
  input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
  input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
  button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
  textarea { overflow: auto; vertical-align: top; resize: vertical; }
  input:valid, textarea:valid {  }
  input:invalid, textarea:invalid { background-color: #f0dddd; }
  
  table { border-collapse: collapse; border-spacing: 0; }
  td { vertical-align: top; }
  
  .chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }
  
  
  /* ===== Initializr Styles =====================================================
     Author: Jonathan Verrecchia - verekia.com/initializr/responsive-tfont-sizeplate
     ========================================================================== */
  
  body{ font:16px/26px Helvetica, Helvetica Neue, Arial; }
  
  .wrapper{
      width:90%;
      margin:0 5%;
      min-height: 100%;
  }
  
  /* ===================
      ALL: Blue Theme 
     =================== */
  
  #header-container{ border-bottom: 20px solid #22558b; width:100% }
  #footer-container{ border-top:    20px solid #22558b; width:100%}
  #main aside      { border-top:    20px solid #22558b; }
  
  #header-container,
  #footer-container,
  #main aside{
      background:#2c6cb1;
  }
  
  #title{color:white; }
  
  ::-moz-selection { background: #2c6cb1; color: #fff; text-shadow: none; }
  ::selection      { background: #2c6cb1; color: #fff; text-shadow: none; }
  
  /* ==============
      MOBILE: Menu
     ============== */
  
  nav a{
      display:block;
      margin-bottom:10px;
      padding:15px 0;
  
      background:#22558b;
      color:white;
  
      text-align:center;
      text-decoration:none;
      font-weight:bold;
  }
  
  nav a:hover, nav a:visited{
      color:white;
  }
  
  nav a:hover{
      text-decoration:underline;
  }
  
  /* ==============
      MOBILE: Main
     ============== */
  
  #main{
      padding:30px 0;
  }
  
  #main article h1{
      font-size:2em;
  }
  
  #main aside{
      color:white;
      padding:0px 5% 10px;
  }
  
  #footer-container footer{
      color:white;
      padding:20px 0;
      clear:both;
      }
  
  /* ===============
      ALL: IE Fixes
     =============== */
  
  .ie7 #title{ padding-top:20px; }
  
  /* ===== Primary Styles ========================================================
     Author: Christopher Leah of Happy Webs LTD - 07/2012
     ========================================================================== */
   .btn{clear:left;float:left; width:79px; margin-left:5px; margin-bottom:2px;}
  .ColHead{float:left; width:50px; margin-left:5px; background-color:#22558B;color:#ffffff;margin-bottom:2px;}
  .RowHead{clear:left;float:left; width:75px; margin-left:5px;background-color:#2C6CB1;color:#ffffff;margin-bottom:2px;}
  .gridBoxes{float:left; width:50px; margin-left:5px; margin-bottom:2px;}
  .graph{margin-top:10px;float:left;}
  h3.left {float: left; width:49%;}
  h3.right {float: right; width:49%; text-align:right;}
  #footer-container a { color:#fff; text-decoration:none; }
  #footer-container a:hover { text-shadow: 1px 1px 1px #000; }
  .txtSmall {width:50px;}
  #title a{color:#fff; text-shadow: 1px 1px 1px #000; text-decoration:none;}
  .disclaimer { font-size:0.8em;}
  .disclaimer a{ color:#22558B;}
  
  
  /* =============================================================================
     Media Queries
     ========================================================================== */
  
  @media only screen and (min-width: 480px) {
  
  /* ====================
      INTERMEDIATE: Menu
     ==================== */  
      nav a{
          float:left;
          width:27%;
          margin:0 1.7%;
          padding:25px 2%;
          margin-bottom:0;
      }   
      nav li:first-child a{ margin-left:0;  }
      nav li:last-child  a{ margin-right:0; } 
  /* ========================
      INTERMEDIATE: IE Fixes
     ======================== */
  
      nav ul li{
          display:inline;
      }   
      .oldie nav a{
          margin:0 0.7%;      
      }
  }
  
  @media only screen and (min-width: 768px) {
  
  /* ====================
      WIDE: CSS3 Effects
     ==================== */
  
      #header-container,
      #main aside{
          -webkit-box-shadow:0 5px 10px #aaa;
             -moz-box-shadow:0 5px 10px #aaa;
                  box-shadow:0 5px 10px #aaa;
      }
  
  /* ============
      WIDE: Menu
     ============ */
  
      #title{
          float:left;
          text-shadow: 1px 1px 1px #000;
      }
  
      nav{
          float:right;
          width:38%;
      }
  
  /* ============
      WIDE: Main
     ============ */
  
      #main article{
          float:left;
          width:57%;
      }
  
      #main aside{
          float:right;
          width:28%;
      }
  }
  
  @media only screen and (min-width: 1140px) {
  
  /* ===============
      Maximal Width
     =============== */
  
      .wrapper{
          width:1026px; /* 1140px - 10% for margins */
          margin:0 auto;
      }
  }
  
  /* =============================================================================
     Non-Semantic Helper Classes
     ========================================================================== */
  
  .ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
  .ir br { display: none; }
  .hidden { display: none !important; visibility: hidden; }
  .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
  .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
  .invisible { visibility: hidden; }
  .clearfix:before, .clearfix:after { content: ""; display: table; }
  .clearfix:after { clear: both; }
  .clearfix { *zoom: 1; }
  
  /* =============================================================================
     Print Styles
     ========================================================================== */
  
  @media print {
    * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
    a, a:visited { text-decoration: underline; }
    a[href]:after { content: " (" attr(href) ")"; }
    abbr[title]:after { content: " (" attr(title) ")"; }
    .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
    pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
    thead { display: table-header-group; } /* h5bp.com/t */
    tr, img { page-break-inside: avoid; }
    img { max-width: 100% !important; }
    @page { margin: 0.5cm; }
    p, h2, h3 { orphans: 3; widows: 3; }
    h2, h3 { page-break-after: avoid; }
  }
  </code></pre>
  
  <p>Heres my HTML:</p>
  
  <pre><code>&lt;!doctype html&gt;
  
  &lt;!--[if lt IE 7]&gt; &lt;html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"&gt; &lt;![endif]--&gt;
  
  &lt;!--[if IE 7]&gt;    &lt;html class="no-js lt-ie9 lt-ie8" lang="en"&gt; &lt;![endif]--&gt;
  
  &lt;!--[if IE 8]&gt;    &lt;html class="no-js lt-ie9" lang="en"&gt; &lt;![endif]--&gt;
  
  &lt;!--[if gt IE 8]&gt;&lt;!--&gt; &lt;html class="no-js" lang="en"&gt; &lt;!--&lt;![endif]--&gt;
  
  &lt;head id="Head1"&gt;&lt;meta charset="utf-8" /&gt;&lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /&gt;&lt;title&gt;
  
      Home - Upper Control Limit
  
  &lt;/title&gt;&lt;meta name="description" /&gt;&lt;meta name="author" /&gt;&lt;meta name="viewport" content="width=device-width" /&gt;&lt;link rel="stylesheet" href="css/style.css" /&gt;
  
      &lt;script src="js/libs/modernizr-2.5.3-respond-1.1.0.min.js"&gt;&lt;/script&gt;
  
  
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div id="header-container"&gt;
  
          &lt;header class="wrapper clearfix"&gt;
  
              &lt;h1 id="title"&gt;&lt;a href="default.aspx" title="Upper Control Limit Homepage"&gt;Upper Control Limit&lt;/a&gt;&lt;/h1&gt;
  
              &lt;nav&gt;
  
                  &lt;ul&gt;
  
                      &lt;li&gt;&lt;a href="default.aspx"&gt;Home&lt;/a&gt;&lt;/li&gt;
  
                      &lt;li&gt;&lt;a href="contact.aspx"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  
                  &lt;/ul&gt;
  
              &lt;/nav&gt;
  
          &lt;/header&gt;
  
      &lt;/div&gt;
  
      &lt;div id="main-container"&gt;
  
              &lt;form method="post" action="default.aspx" id="Form1" enctype="multipart/form-data"&gt;
  
  &lt;div class="aspNetHidden"&gt;
  
  &lt;input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUIMzI4MjE1NjZkZO1bVtBx0KanNtHBuPKe20ZygwvsWgeEn3cRtL/CrOHU" /&gt;
  
  &lt;/div&gt;
  
  
  
  &lt;div class="aspNetHidden"&gt;
  
  
  
      &lt;input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBQK3heD7DwLHyoqxBgLHyuK8AQKDw8wMAt3oqtEMt6vvVJr549pcOORe6AIL/bfdHDA/UvYWb5jzHlW8pc0=" /&gt;
  
  &lt;/div&gt;
  
  
  
      &lt;div id="main" class="wrapper clearfix"&gt;
  
              &lt;article&gt;
  
                  &lt;section&gt;
  
                      &lt;h2&gt;Manual Data Entry&lt;/h2&gt;
  
  
  
                      &lt;label&gt;Rows:&amp;nbsp;&lt;/label&gt;&lt;input name="ctl00$MainContent$txtRows" type="text" id="MainContent_txtRows" class="txtSmall" /&gt;
  
                      &lt;label&gt;Cols:&amp;nbsp;&lt;/label&gt;&lt;input name="ctl00$MainContent$txtCols" type="text" id="MainContent_txtCols" class="txtSmall" /&gt;
  
                      &lt;p&gt;&lt;em&gt;*Maximum of 10 rows and/or 30 columns for this trial version.&lt;/em&gt;&lt;/p&gt;
  
                      &lt;p&gt;&lt;input type="submit" name="ctl00$MainContent$btnGo" value="Go" id="MainContent_btnGo" /&gt;&lt;/p&gt;
  
                      &lt;br /&gt;
  
                   &lt;/section&gt; 
  
                  &lt;section&gt;
  
                      &lt;h2&gt;File Uploader&lt;/h2&gt;
  
  
  
                      &lt;p&gt;&lt;input type="file" name="ctl00$MainContent$flUp" id="MainContent_flUp" /&gt;&amp;nbsp;&lt;/p&gt;
  
                      &lt;p&gt;(Maximum File Size: 3KB)&lt;br /&gt;&lt;em&gt;*Do not include any column headers or text in your CSV.&lt;/em&gt;&lt;/p&gt;
  
                      &lt;p&gt;&lt;input type="submit" name="ctl00$MainContent$btnUpload" value="Upload" id="MainContent_btnUpload" /&gt;&lt;/p&gt;
  
                      &lt;br /&gt;
  
                  &lt;/section&gt;  
  
                  &lt;section&gt;
  
                      &lt;h3&gt;Disclaimer&lt;/h3&gt;
  
                      &lt;p class="disclaimer"&gt;Data uploaded or manually entered, is deleted immediately 
  
                          after processing. If you have concerns over your data or privacy, please read our &lt;a href="disclaimer.aspx" title="UCL Disclaimer"&gt;disclaimer&lt;/a&gt;.&lt;br /&gt;If your data contains sensitive information, you should consider 
  
                          integrating the UCL engine within your system.  Please &lt;a href="contact.aspx" title="Contact us"&gt;contact us&lt;/a&gt; for more information. &lt;br /&gt;&lt;/p&gt;
  
                  &lt;/section&gt;              
  
              &lt;/article&gt;                          
  
              &lt;aside&gt;
  
                  &lt;h3&gt;About UCL&lt;/h3&gt;
  
                  &lt;p&gt;Control Charts have multiple applications in a wide variety of industries. They 
  
                      can help measure the effectiveness of manufacturing processes or the quality of 
  
                      service based industry.&lt;/p&gt;
  
                  &lt;p&gt;The UCL calculator has been developed by Data-Exchange Ltd as a side project 
  
                  which was driven by the need to integrate this magic formula within various 
  
                  business applications.&lt;/p&gt;
  
                  &lt;h4&gt;Upper Control Limit Formula&lt;/h4&gt;
  
                  &lt;p&gt;&lt;img src="img/ucl-formula.png" title="Upper Control Limit Formula" alt="Upper Control Limit Formula: X + 2.66* MR" /&gt;&lt;/p&gt;
  
                  &lt;h4&gt;Lower Control Limit Formula&lt;/h4&gt;
  
                  &lt;p&gt;&lt;img src="img/lcl-formula.png" title="Lower Control Limit Formula" alt="Lower Control Limit Formula: X - 2.66* MR" /&gt;&lt;/p&gt;
  
              &lt;/aside&gt;
  
      &lt;/div&gt;
  
  
  
              &lt;/form&gt;
  
      &lt;/div&gt; &lt;!-- #main-container --&gt;
  
      &lt;div id="footer-container"&gt;
  
          &lt;footer class="wrapper clearfix"&gt;
  
              &lt;h3 class="left"&gt;Copyright © 2012 &lt;a href="http://www.data-exchange.co.uk/" title="Data Exchange Ltd"&gt;Data Exchange Ltd&lt;/a&gt;&lt;/h3&gt;
  
              &lt;h3 class="right"&gt;&lt;a href="http://www.perfect-flow.com/" title="PerfectFlow Ltd" &gt;&lt;img alt="PerfectFlow" border="0" src="img/perfectflow.gif" /&gt;&lt;/a&gt;&lt;/h3&gt;
  
          &lt;/footer&gt;
  
      &lt;/div&gt;
  
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;    window.jQuery || document.write('&lt;script src="js/libs/jquery-1.7.2.min.js"&gt;&lt;\/script&gt;')&lt;/script&gt;
  
  &lt;script src="js/script.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  
      var _gaq = _gaq || [];
  
      _gaq.push(['_setAccount', 'UA-17073042-4']);
  
      _gaq.push(['_trackPageview']);
  
      (function () {
  
          var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  
          ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  
          var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  
      })();
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Thanks for any help guys!</p>