title: making a footer stick to the bottom of the page
body: <p>I am having a nghtmare with some code on a site I am making, should be pretty simple but it isn't proving so.</p>
  
  <p>I want my footer to stick to the bottom of the page, but for all the content to come first (when there is more than a page worth, if that makes sense)</p>
  
  <p>I have been able to do it in Safari, Chrom and Firefox but suprise suprise Internet Explorer is proving to be the main problem.</p>
  
  <p>Am at a point now where it is on the bottom however the footer appears over the content of the page when there is alot (See the 'Who we are' tab).</p>
  
  <p><a href="http://www.break-comms.com/index.html" rel="nofollow noreferrer">http://www.break-comms.com/index.html</a></p>
  
  <p>I would really appreciate any help whatsover on this as it is really begining to annoy me, been going back an fort changing code for a good few hours now.</p>
  
  <p>Below is the CSS that accompanies the page, like I said any help on this would be REALLY appreciated.</p>
  
  <pre><code>* {
      border:0px;
      margin:0px;
      padding:0px;
  }
  
  #html {
      height:100%;
      }
  
  
  #banner {
      padding: 5px 0px 10px 0px;
  }
  
  #container {
      width:970px;
      margin:0 auto;
      height: 100%;
      position: relative;
  }
  
  #wrapper {
      position: relative;
      min-height: 100%;
  
  }
  #nav {
      margin-left:0px;
      text-indent:0px;
      text-align:center;
  }
  
  #menutab li {
      display:inline;
      list-style-type:none;
      font-family:Arial;
      font-size:18px;
      font-weight:100;
      text-align:center;
  
  
  }
  
  #menutab a {
      color:#9ea3ab;
      padding:5px 32px 5px 32px;
      text-decoration:none;
      text-align:center;
  }
  
  #menutab b {
      color:#9ea3ab;
      padding:5px 0px 5px 0px;
      text-decoration:none;
      text-align:center;
  }
  
  
  #menutab a:hover {
      color:#28957f;
  }
  
  #social .socialImage{float:right;
  
  }
  
  .divFloat {
  float:right;
  padding:0px 5px 0pc 0px;
  }
  
  .clear {
  clear:both;
  }
  
  #social {
      background:transparent;
  }
  
  #footer {
      Position:fixed;
      bottom:0;
      width:970px;
      height:45px;
      background-image:url(images/footer.gif); width:970px; height:45px;
  }
  
  
  
  #footermenu .footermenu{float:right;
  
  }
  
  #footermenu li {
      display:inline;
      font-family:Arial;
      list-style-type:none;
      font-size:16pt;
  }
  
  #footermenu a {
      color:#9ea3ab;
      font-family:Arial;
      padding:0px 5px 0px 0px;
      text-decoration:none;
      text-align:right;
  
  }
  
  #footermenu a:hover {
      color:#28957f;
  }
  
  .clearfooter {
      height:45px;
      clear:both;
      }
  #address {
      color:#28957f;
      font-family:Arial;
      font-size:16px;
      text-indent:5px;
  }
  
  #address2 {
      color:#9ea3ab;
      font-family:Arial;
      font-size:14px;
      text-indent:5px;
  }
  
  #contentbackground {
      background-image:url("images/homebackgroundimage.gif"); width:970px; height:400px;
  }
  
  #contentbackgroundcontact {
      background-image:url("images/contactbackgroundimage.gif"); width:970px; height:330px;
  }
  
  #contentbackgroundyouth {
      background-image:url("images/youthbackgroundimage.gif"); width:970px; height:350px;
  }
  
  #contectbackgroundwhoweare {
      background-image:url("images/whowearebackgroundimage.gif"); width:970px; height:700px;
  }
  
  #contentbackgroundmusic {
      background-image:url("images/musicbackgroundimage.gif"); width:970px; height:360px;
  }
  
  #contentbackgroundbrand {
      background-image:url("images/brandbackgroundimage.gif"); width:970px; height:500px;
  }
  
  #content {
      color:#9ea3ab;
      font-family:Arial;
      font-size:14px;
      padding:5px 30px 5px 50px;
      text-decoration:none;
      text-align:top;
  }
  
  #content2 {
      color:#9ea3ab;
      font-family:Arial;
      font-size:14px;
      padding:5px 30px 5px 70px;
      text-decoration:none;
      text-align:top;
  }
  
  
  #contentcontact {
      color:#9ea3ab;
      font-family:Arial;
      font-size:16px;
      padding:5px 30px 5px 50px;
      text-decoration:none;
      text-align:top;
  }
  
  
  h1 {
      color:#9ea3ab;
      font-family:Arial;
      font-size:16px;
      padding:5px 30px 5px 35px;
      text-decoration:none;
      text-align:top;
  }   
  
  
  
  
  
  body {
      height: 100%;
      background-image:url("images/denimbackground.gif"); repeat;
  }
  </code></pre>