Sticky footer revisited

I used to use below to fix opera and ie8…

html:before, #wrap:before { /* Opera and IE8 “redraw” bug fix */
content:“”;
float:left;
height:100%;
margin-top:-999em;
}

But it was brought to my attention that my demo no longer worked (wouldnt even display the page) in the newest chrome. I checked and html:before was the culprit. Changing it to body:before fixed chrome. But further testing showed that the newest Opera no longer even needed it. So now I just have the below code in my demo to fix opera and ie8 redraw bug…

#wrap:before { /* Opera and IE8 “redraw” bug fix */
content:“”;
float:left;
height:100%;
margin-top:-999em;
}

Width:0 seems to work well too instead of margin-top:-999em. Although I seem to remember a reason for that.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>{ visibility: inherit; } Sticky Footer!</title>
<style type="text/css">
* {
margin:0;
padding:0; 
}
html, body {
height:100%; 
background:#999;
}
#wrap {
min-height:100%; 
width:1000px; 
margin:0 auto;
background:#ddd;
border:solid;
border-width:0 1px;
}
#wrap:before { /* Opera and IE8 "redraw" bug fix */
content:"";
float:left;
height:100%;
margin-top:-999em;
}
* html #wrap { /* IE6 workaround */
height:100%; 
}
h1 {
text-align:center;
padding:100px 0 200px; /* padding-bottom equals height of #foot */
}
#foot {
height:200px;
width:1000px;
margin:-200px auto 0; /* negative margin-top equals height of #foot */
background:url(images/sticky-foot.jpg);
}
</style> 
</head>
<body>

<div id="wrap">
<h1>STICKY FOOT!</h1>
</div>
<div id="foot"></div>

</body>
</html>

What’s this “sticky footer” supposed to do? Can you not just give something a fixed position and set it bottom 0? Or does it do something else?

Something else. It puts a footer on the page that will “stick” (hence the name) to the bottom of the viewport, but if there is a lot of content, it will shift down.

See http://www.sitepoint.com/forums/1239966-post3.html

Example http://www.pmob.co.uk/temp/sticky-footer-ie8new-no-table.htm

Hi Eric,

We never used html:before in the demo and always used body:before so chrome would not be an issue with my original example.

Opera 11 does seem to have fixed the redraw issue though and needs a fix.

You can’t put the 100% high float inside #wrap because then it may drag other floated content upwards with it. You can’t remove the negative margin because then any content in the wrapper that is set to clear:both will disappear under the fold. That’s what the large negative margin is for so that the float has no effect on content in the page.

All you needed to do was set the wrapper to clear:both in the original method of ours.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sticky Footer at Bottom</title>
<style type="text/css">
* {/* for demo only*/
    margin:0;
    padding:0
}
html, body {
    height:100%;/* needed to base 100% height on something known*/
    text-align:center;
}
#outer {
    width:760px;
    background:#ffffcc;
    margin:auto;
    min-height:100%;
    margin-top:-40px;/*footer height - this drags the outer 40px up through the top of the monitor */
    text-align:left;
    clear:both;
}
* html #outer {
    height:100%
}
#header {
    background:red;
    border-top:40px solid #fff; /* soak up negative margin and allows header to start at top of page*/
}
#footer {/* footer now sits at bottom of window*/
    background:red;
    width:760px;
    margin:auto;
    height:40px;/* must match negative margin of #outer */
    clear:both;
}
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
h1, h2, p {
    padding:0 10px;
}
#outer:after {/* thank you Erik J - instead of using display table for ie8*/
    clear:both;
    display:block;
    height:1%;
    content:" ";
}
</style>
</head>
<body>
<div id="outer">
    <div id="header">
        <h1>Sticky Footer</h1>
    </div>
    <h2>Ultimate Sticky footer that works in ie5/6/7/8, Opera 9 and 10, Firefox 2+, Chrome, Safari 3+ (and <a href="http://www.browsercam.com/public.aspx?proj_id=490004">probably every other modern browser</a>)</h2>
    <p>test</p>
    <p style="clear:both">Element with clear:both added just for testing</p>
    <p>test</p>
    <p>test</p>
</div>
<div id="footer">
    <p>Footer</p>
</div>
</body>
</html>

Sticky Footer at Bottom

Of course the opera float could be removed completely if only opera 11 support is required.

Ah, I see. Very clever.

Thank you Paul for the clever solution. Just what I needed.

Great solution Paul, thank you.

Just one thing: what if i want to have both header and footer background on the full width? How can i achieve that?

Hi,

If the header is also a fixed height you can do it this way (that’s assuming you wanted the content still ficed width and centered otherwise if the whole layout was to be 100% wide then just use the normal method but all at 100% width etc).

If the header isn’t a fixed height then it can be done but gets a lot more complicated.:slight_smile:

Hi Paul, :slight_smile:

So I tested my humble demo by puting floats in the wrap and I couldn’t produce any problem. Am I missing something? Thanks.

“You can’t put the 100% high float inside #wrap because then it may drag other floated content upwards with it.”

IIRC I think the issue I saw was that if the wrap had been floated (as some people do to contain floats) and then everything seemed to get pulled upwards.

Apart from that it seemed to work ok :). However you can’t remove the bottom negative margin or any floats that are cleared will jump down 100%.
I would also use the pixel mount that we used as that is the limit. If your 999em ever equates to higher than the limit (unlikely I know) then opera breaks once again.

Thanks for bringing the new opera 11 behaviour to my attention but its a shame that they fix one bug and then break something else though :slight_smile: I’'ve more or less given up on opera as it has too many odd unfixable bugs and changes behaviour on every iteration.

Ok cool. Thanks! I believe Opera fixed that negative margin limit a couple versions ago. At least they did when I originally tested all that a while back.

Ah ok thanks, I haven’t tested that lately :slight_smile:

That solution is very similar to the one on this website: New CSS Sticky Footer - 2010 - HTML for Bottom of Page Footer

If you try to see that website with Chrome (my version is 10.0.648.151) and adjust the width so the horizontal scroll appears, you’ll see the same error i have on my layout. The footer background disappears.

EDIT: I’ve noticed know that your example have the same problem.

Yes and if you look at the acknowledgement on the home page Steve mentions me by name :). ( My version is the oldest on the internet and pre dates (2003) all other versions (and is also now the most modern as well).)

If you try to see that website with Chrome (my version is 10.0.648.151) and adjust the width so the horizontal scroll appears, you’ll see the same error i have on my layout. The footer background disappears.

EDIT: I’ve noticed know that your example have the same problem.

That’s nothing to do with the sticky footer but just that the footer (and header) need a min-width to match the width of the centred layout.

e.g.


#header,#footer{min-width:900px}

I’ve updated my example to show it works.

It would happen to any 100% wide element that is aligned with fixed content. Just add a min-width equal to the widest element on the page.

Yes, it worked, thank you!

Can this be applied on your first example (http://www.pmob.co.uk/temp/sticky-footer-ie8new-no-table.htm)? I’m having some trouble adjusting the header with that method.

EDIT: Nevermind, i did it. Once again, thank you.