What do you think? 
This is the easiest I can make it. http://www.visibilityinherit.com/code/css3-sticky-footer-demo.php.
God Damnit! I just assumed that :before took care of the AP footer. I should of tested first before I blew my own horn. Eric slowly slinks away hunched over and embarrassed⌠
apparently more testing is in order.
Eric dusts himself off and gets back on the horse. 
OK now itâs perfect! The AP footer is accounted for. http://www.visibilityinherit.com/code/css3-sticky-footer-demo1.php
Edit: Updated link
And the more typical footer outside the wrapper http://www.visibilityinherit.com/code/css3-sticky-footer-demo2.php
Hi Eric,
Basically you are swapping padding or borders on the inner element in favour of using :after to soak up the space. While that is a good technique it does tie up the :after or :before classes as I use them all the time for adding things and would not like to use them up if the alternative is simply adding padding to an existing item - especially as the clearing techniques use :after and most have those built in to their templates and could cause conflicts to the unwary.
However it is a useful technique and I noticed a good round up of techniques in your site but they are all missing a new trick
The downfall of all the sticky footer routines is that you need to have a fixed height for your footer otherwise you canât accommodate it. However, if only IE8+ support is required then you can do this for an auto height sticky footer like so:
<!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">
* {
margin:0;
padding:0
}
html, body { height:100% }
#outer {
width:760px;
background:#ffffcc;
margin:auto;
height:100%;
display:table;
table-layout:fixed;
vertical-align:top;
}
.inner { display:table-row; }
#footer {
background:red;
width:760px;
vertical-align:bottom;
height:1px;/* use a minimum height to keep footer wrapped to content */
}
#main {
vertical-align:top;
background:blue;
width:100%;
}
#main, #footer { display:table-cell }
</style>
</head>
<body>
<div id="outer" >
<div class="inner">
<div id="main">
<p>test start</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test last</p>
</div>
</div>
<div class="inner">
<div id="footer">
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
</div>
</div>
</div>
</body>
</html>
If you are looking for an even simpler version of the standard sticky footer then you can use box-sizing (ie8+) with minimal code:
<!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>Untitled Document</title>
<style type="text/css">
html, body {
height:100%;
margin:0;
padding:0;
}
h1, p { margin:0; }
.outer {
width:960px;
margin:auto;
height:100%;
display:table;
padding-bottom:100px;
background:#ffc;
position:relative;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.footer {
position:relative;
width:960px;
margin:-100px auto 0;
height:100px;
color:#fff;
clear:both;
background:#000;
}
</style>
</head>
<body>
<div class="outer">
<h1>Sticky Footer</h1>
</div>
<div class="footer">Footer</div>
</body>
</html>
You just make the space for the footer with the padding bottom which is contained within the 100% in the border-box model. That saves all the complicated after rules.
I am still wary of using the absolute positioned sticky footer as I still see problems in IE8 in dynamic situations where content has been inserted and IE8 suddenly forgets where the bottom was due to the sticky footer routine. Therefore I would still go for the static/relative element where possible.
Regarding browser limits then we ran into the 32767px limit in a recent thread regarding Firefox tiling images so its a good idea never to exceed that limit.
Good work though and always interesting as usual
Thanks Paul The height limit maybe a problem with some other things but, at least for now, with this technique, there doesnât seem to be one unless I somehow missed it. Ya that can be true about using up the before and after. So if thats a prob for anyone use display table for ie8 on the container and some padding or another technique on the innards. Thats a nice auto height. Do you have that auto hieght footer up live somewhere so I can link to it?
O and also regarding the ap footer. I made one using the same stuff with the footer outside too. Demo 2.
O and regarding the dynamic stuff and ie8 not adjusting the page to follow. I would like to test this. I think that may be a non-issue as long as you have one of the fixes in place for for ie8. Logic says that if with the fix in place ie follows the footer when dragging the window it âshouldâ also follow it when dynamic stuff pops in. Just a thought.
And as a side note, as I wrote in this morning in the tut you can add clear both to the wrap:after as a clearing mechanism
Hi Eric,
Thereâs a version here but its a few years old although and probably needs some more testing but seems to work on all the modern browsers and IE8+.
Cool Iâll link to it as an alternate example in your example #10. Do you have any dynamic js to quickly pop in there and test my theory?
That css3 footer you just posted (not the auto height) is nice. Auto height is nice to just not the one Iâm referring to. I assume you had clear both on the footer just for float clearing yes? But why the position relative on the container and the footer? Testing it all works with out either three rules.
The problem is that it is one of those bugs that only crops up in complicated situations and isnât always reproducible and indeed only seems to happen when online and there is a server lag thrown into the mix. Iâve seen it a few times now but checking my records it was mainly in IE7 and 6 so IE8 should be ok I think.
There were fixes for it and one was overflow:hidden instead of using a clearer or :after rule and the other was via the JS that was doing the hide and show and if you address a main container after youâve hidden or revealed content it makes the page reflow and fixes the mispositioned element.
e.g.
el.className = el.className;//reflow
No most of those extra rules were just left in from testing and not needed. I did test it with the absolute footer originally but it didnât need it. The position:relative on the footer is just to make sure it doesnât get dragged underneath the element above.
Looks good Eric
Typo here you may want to correct:
shone
I think you meant âshownâ 
Ahh yes. Thanks Paul. Wow only one error. Spelling has never been my strong suit.
Not really a âCSS3 sticky footerâ if all the offered files use php.
What has that got to do with anything? Please Clarify.