CSS Footer which works in IE and firefox

cssfirefoxfooterinternet explorer

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.

Consider that my page has a fixed width, 2 columns of varying height and my footer has a 100 percent width.

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:

@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 */

And the HTML is somewhat like this

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

Where am I messing it up

Best Answer

I'd try the CSS Sticky Footer.

Related Topic