title: How to stick a footer to bottom in css?
body: <p>I am having the classic problem for the positioning of a Footer on the bottom of the browser. I've tried methods including <a href="http://ryanfait.com/resources/footer-stick-to-bottom-of-page/" rel="noreferrer">http://ryanfait.com/resources/footer-stick-to-bottom-of-page/</a> but to no good result: my footer always keeps appearing in the middle of the browser window in both FF and IE. </p>
  
  <p>In the HTML i got this simple structure</p>
  
  <pre><code>&lt;form&gt;
   ...
   &lt;div class=Main /&gt;
   &lt;div id=Footer /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Here is the css code that is relevant for the css footer problem:</p>
  
  <pre><code>    *
      {
          margin: 0;
      }
  
  
  html, body
  {
      height: 100%;
  }
  
  
      #Footer
      {
          background-color: #004669;
          font-family: Tahoma, Arial;
          font-size: 0.7em;
          color: White;
          position: relative;
          height: 4em;
      }
  
  
  
      .Main
      {
          position:relative;
          min-height:100%;
          height:auto !important;
          height:100%;
  
          /*top: 50px;*/
  
          margin: 0 25% -4em 25%;
  
          font-family: Verdana, Arial, Tahoma, Times New Roman;
          font-size: 0.8em;
          word-spacing: 1px;
          line-height: 170%;
          /*padding-bottom: 40px;*/
      }
  </code></pre>
  
  <p>Where am I doing wrong? I really have tried everything. 
  If I missed any useful info please let me know.</p>
  
  <p>Thank you for any suggestion in advance.</p>
  
  <p>Regards,</p>
  
  <hr>
  
  <p>thank you all for your answers.
  it worked with:</p>
  
  <pre><code>position:absolute;
      width:100%;
      bottom:0px;
  </code></pre>
  
  <p>setting position:fixed did not work in IE for some reason(Still showed footer in the middle of the browser), only worked for FF.</p>