CSS Footer which works in IE and firefox

Question

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

Answer 1

I'd try the CSS Sticky Footer.

Answer 2

Can't say without seeing the code, but with a two column layout, you probably have at least one column floated. Placing style="clear:both" in the footer should force it to the bottom of the page.

Answer 3

It depends on what you're trying to achieve, I think. The first suggestion I have is to use:

#footer {clear: both;
        }

This will, at the least, push the footer below the longest of the columns, presuming that there's more than one.

The second suggestion, and my preferred solution (bearing in mind I'm not sure about cross-browser/OS compatibility), is:

#footer {position: absolute;
         bottom: 0;
         left: 0;
         right: 0;
         }

This is pretty self-explanatory, but essentially attaches the footer to the bottom of the page, and allows the #footer to adjust according to its contents, also it means the #footer will be 100% wide (give or take a pixel), so adjust according to your design.

Answer 4

I got it sorted - for some reason there were two instances of clear:both although I don't see how that was causing a problem but removing the redundant entry fixed it :\ one of those weird solutions which don't seem to make any sense. Thanks anyway guys.