CSS Footer, die funktioniert im IE und firefox

Hallo Leute, ich versuche, fügen Sie ein css footer, kann aber nicht, es richtig zu arbeiten. Jetzt bin ich Optimiere es wie verrückt und wenn es scheint fein in firefox es ruft alle Durcheinander in Internet Explorer 7, ahd manchmal in der Mitte der Seite :(. Gibt es eine gute Beispiel für eine css-basierte Fußzeile.

Bedenkt, dass meine Seite hat eine Feste Breite, 2 Spalten unterschiedlicher Höhe und mein footer hat eine 100-Prozent-Breite.

---

Naja ich bin mit dem css sticky footer wie es ist - es scheint gut zu funktionieren, im firefox aber mit dem IE meine Fußzeile ist schwebend in der Mitte der Seite. Ich habe bemerkt, dass meine Fußzeile hängt am unteren Rand des browser-viewport-Höhe. Ich denke, seine wie IE ist die Interpretation der Höhe zu 100 Prozent so. Die css sticky footer funktioniert gut auf seine eigene, aber, wie ich meine änderungen und Ergänzungen es wird versaut in den IE. Die basic-code für den footer und header ist so:

@charset "utf-8";
/* CSS Document */

html, body, #wrap {height: 100%;}
body > #wrap > #main > #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 */

Und der HTML-Code so etwas wie dieses

<div id="wrap">
 <div> header is here</div>
 <div id="main" class="clearfix">content is here </div>
</div>
<div id="footer"></div>

Wo bin ich Durcheinander es bis