CODEWITHSUNDEEP
htmlcss
cronoklee
cronoklee

Reputation: 6702

CSS sticky footer with margin-top on main wrapper

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/

Upvotes: 2

Views: 4046

Answers (4)

Smuuf
Smuuf

Reputation: 6524

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.

Upvotes: 0

Sam
Sam

Reputation: 1243

A solution without adding a scrollbar. Make these adjustments:

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

.download{
top:175px;
}

Upvotes: 0

Tracy Fu
Tracy Fu

Reputation: 1662

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 :)

Upvotes: 1

Sam
Sam

Reputation: 1243

Could you apply a margin-top to the body?

body{
margin-top:15px;
}

This works with firebug on the page you linked to.

Upvotes: 0

Related Questions