CSS sticky footer with margin-top on main wrapper

Question

I've been using http://ryanfait.com/sticky-footer/ and it works great until you need a margin/padding at the top of the page. The design I'm working with has a patterned body and all the page content is in a white box that starts 15px from the top. I still need a footer that sticks to the bottom cross browser. Any ideas?

UPDATE:

Thanks for all the ideas but noting works perfectly. Adding a margin to a sub element of the wrapper puts in an un-nessary scrollbar : Working example: http://jsfiddle.net/cronoklee/p2cPD/

Answer 1

If you're open to scrapping the sticky footer you've been using, here's how I would go about making one from scratch.

HTML

<div class="wrapper">
    <div class="content">
        ... Your Content Here ...
    </div>
</div>
<div class="footer">
    ... Your Footer Here ...
</div>

CSS

.wrapper {
    background: #eee;
    padding: 15px 0 100px;
}

.content {
    background: #fff;
}

.footer {
    background: #ccc;
    bottom: 0;
    height: 100px;
    left: 0;
    position: fixed;
    right: 0;
}

That should work cross browser. The only nuance about this to be aware of is that position: fixed doesn't work in IE 6. Any improvements are welcome :)

Answer 2

Well, I just found this thread since I have had the same problem ten minutes ago and I'd like to share my solution to the problem with " unnecessary scrollbar caused by vertically-down-shifted footer caused by my header-div with margin-top: 20px, because I just want it to be 20px from the very top of the page ", which I came up in the meantime.

Just change your .content{margin-top:15px;} to .content{padding-top:15px;} and it should work. The scrollbar should disappear and the content has it's distance from the top.

As seen here: http://jsfiddle.net/p2cPD/24/

Yes - it will expand the content-div's background, but if you don't want it there it can be solved by using some transparent png of some sort or whatever.

Also, according to the http://ryanfait.com the <div class="push"></div> thing should be at the end inside wrapper-div and after content-div, not inside content-div.

Answer 3

Could you apply a margin-top to the body?

body{
margin-top:15px;
}

This works with firebug on the page you linked to.

Answer 4

A solution without adding a scrollbar. Make these adjustments:

.header{
height:168px; /*15px + image height*/
image-position:bottom;
margin-bottom:37px;
}

.download{
top:175px;
}