title: CSS Footer which works in IE and firefox
body: <p>Hi guys I'm trying to add a css footer but can't it to work right. For now I'm tweaking it like crazy and if it appears fine in firefox it gets all messed up in Internet Explorer 7 ahd sometimes is halfway up teh page :(. Is there any good example out there for a css based footer. </p>
  
  <p>Consider that my page has a fixed width, 2 columns of varying height and my footer has a 100 percent width.</p>
  
  <hr>
  
  <p>Well I'm using the css sticky footer as is - it seems to work fine in firefox but with IE my footer is floating halfway up the page. I have noticed that my footer hangs on the bottom of the browser viewport height. I think its how IE is interpreting the height to be 100 percent of so. The css sticky footer works fine on its own but as I put my modifications and additions it gets messed up in IE. The basic code for the footer and header is as so:</p>
  
  <pre><code>@charset "utf-8";
  /* CSS Document */
  
  html, body, #wrap {height: 100%;}
  body &gt; #wrap &gt; #main &gt; #pageContent {height: auto !important; min-height: 100%;}
  
  #main
  {
      background-color:#FFFFFF;
      width:960px;
      height:100% !important;
      text-align:left;
      position:relative;
  }
  
  #footer
  {
      display:block;
      width:100%;
      text-align:center;
      position: relative;
      height: 150px;
      clear:both;
  
  }
  /* CLEAR FIX*/
  .clearfix:after 
  {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
  }
  .clearfix 
  {
      display: inline-block;
  }
  /* Hides from IE-mac \*/
  * html .clearfix {
      height: 1%;
  }
  .clearfix 
  {   
      display: block;
  }
  /* End hide from IE-mac */
  </code></pre>
  
  <p>And the HTML is somewhat like this</p>
  
  <pre><code>&lt;div id="wrap"&gt;
   &lt;div&gt; header is here&lt;/div&gt;
   &lt;div id="main" class="clearfix"&gt;content is here &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="footer"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Where am I messing it up</p>