title: css footer not pushing to bottom of page
body: <p>i am using this css code for my website but the footer doesnt seem to be pushing to the bottom of the page under all the content. i have created a fiddle so you can also see the html code: <a href="http://jsfiddle.net/LQKns/" rel="nofollow">http://jsfiddle.net/LQKns/</a> but im not too sure what the problem is :/</p>
  
  <p>can anyone help please...</p>
  
  <pre><code>* {
      margin:0;
      padding:0;
  }
  
  html, body, #wrap {
      width:100%;
      height:100%;
      margin:0;
      padding:0;
      font-family:Calibri;
  }
  #wrap {
      min-height: 100%;
      height: auto !important; 
      height: 100%; 
      margin: 0 auto -580px 0; /* the bottom margin is the negative value of the footer's height */
  }
  
  #slider-wrap {
      width:100%;
      margin:0 auto 0 auto;
  }
  
  .push {
      height: 580px; /* .push must be the same height as .footer */
  }
  </code></pre>
  
  <p>and here is my footer css:</p>
  
  <pre><code>/* FOOTER */
  #footer {
      width:100%;
      height:580px;
      border-top:4px solid #ed1c24;
      background-color:#eeeeee;
  }
  #footer-inner {
      width:80%;
      margin:0 auto 0 auto;
      height:inherit;
  }
  #footerTop {
      width:100%;
      height:480px;
      padding-top:10px;
      border-bottom:2px #000000 solid;
  }
  #footerTopLeft {
      width:30%;
      height:420px;
      float:left;
      display:inline;
      margin-top:10px;
      padding:0 15px 10px 15px;
      border-right:1px solid #000000;
  }
  #footerTopMid {
      width:30%;
      height:420px;
      float:left;
      display:inline;
      margin-top:10px;
      padding:0 15px 10px 15px;
      border-right:1px solid #000000;
  }
  #footerTopRight {
      width:30%;
      height:420px;
      float:left;
      display:inline;
      padding:0 15px 10px 15px;
  }
  
  #enquiryForm                    { clear:both; padding:8px 40px 0 0;  }
  .enquiryField                   { clear:both; padding:5px 0; }
  .enquiryField label             { clear:none; float:left; }
  .enquiryField input             { clear:none; font-family:Calibri; float:right; padding:3px; width:189px; }
  .enquiryField textarea          { clear:none; float:right; font-family:Calibri; padding:5px; width:189px; }
  
  .enquiryError                   { clear:both; color:#fff; font-family:Calibri; }
  #enquirySent                    { color:#fff; font-family:Calibri; }
  </code></pre>