Solution Time 
Another week over and another quiz bites the dust. Thanks to all that have contributed, watched and taken part.
I should point out right at the start that I don't think that "sticky footers" are always a good idea but they are commonly asked for so we do need a solution and it also makes for a good quiz.
There are a number of ways to solve the puzzle and the eagle eyed among you spotted that my old demo from 2003 is actually working in all modern versions of opera and in IE8 also.
The reason that this version is working when all other sticky footers fail was because of the inclusion of a minHeight hack that was used for old versions of Safari (back in 2002/3). This was simply a 0px width 100% high float that holds the page open to an initial 100% height.
While this method fixed old Safari's lack of min-height it also had the benefit of fixing Opera's bad re-draw when the viewport was moved in a vertical direction. The same hack also fixes IE8 which was suffering from the same problem as opera.
A couple of you managed to make this connection and used it in your answers so well spotted.
The downside of this method is the extra div needed and the fact that you would need to contain any other content inside a parent float or any elements with clear applied would drop below the 100% high minheight float hack. However as far as Opera goes this is the only reliable solution to date that works smoothly and as expected without fault.
There are a number of other solutions for IE8 and the simplest would be to set the outer to display:table and use height:100% which fixes the issue straight away. However the code would need to be given to ie8 only because of a long standing gecko bug that causes redraw problems unless you also include extra elements that have been set to display:table-row and display:table-cell.
There is a another fix for IE8 and that is to use a 1% height on an inner wrapper and because the parent is a min-height the height:1% should resolve to height:auto but for some unknown reason it also fixes the ie8 problem (sounds almost like ie8 has something like "haslayout" although this has been removed in ie8 apparently).
Another solution was to use the absolutely positioned footer method but this also suffers from a nasty bug in ie6/7 where dynamic content is used and the footer is misplaced after content is revealed or hidden. Therefore in most instances I recommend not using the absolute method unless you are sure you won't be loading dynamic data into it.
Here is one of my solutions that should work everywhere.
Code:
<!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*/
}
#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 */
}
/* #inner protects any floats in the content from clearing the minheight float */
#inner {
width:760px;
overflow:hidden;/* you could use float:left if you wanted content to overflow*/
/* background:#ffffcc; If floated instead of overflow:hidden then repeat #outer background color here */
}
#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;
}
.minheight {/* opera and IE8 fix*/
float:left;
width:0;
height:100%;
margin:0 0 -40px;/* if clear both was added to footer it would go below the fold so this matches the footer height*/
overflow:hidden;/* just in case*/
}
</style>
<!--[if lt IE 8]>
<style type="text/css">
* html #outer {height:100%}/* ie6 needs this*/
.minheight{display:none}/* ie6 and 7 don't need this */
</style>
<![endif]-->
</head>
<body>
<div class="minheight"></div>
<div id="outer">
<div id="inner">
<div id="header">
<h1>Sticky Footer</h1>
</div>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</div>
</div>
<div id="footer">Footer</div>
</body>
</html>
The downside is the extra 2 elements needed to create this effect. If you weren't worried about Opera we could lose the 2 extra divs and give ie8 (alone) display:table and be done with it.
Winners:
I had some more or less correct entries from a few of you but there was always a slight problem in one browser or another depending on the scenario.
Therfore for persistence and the fact that the final version uses less divs than my original the winner this week is Maleika (Kohoutec). She managed to use the before: pseudo element to place the 100% high float and therefore save an unnecessary div in the mark up. Well done maleika
Special mention to Gary Turner who came up with the display:table solution and managed to get it working (to a degree) in some opera versions.
Also thanks to Yurikolovsky and Ryan who both came up with solutions although they were heavily based on my original
Well done to all who took part.
I'm not going to post all the solutions because I had multiple entries but I will post a few to give you the flavour.
First solution from Maleika which may still be available here:
http://rockatee.com/temp/sticky_polished2.html
http://rockatee.com/temp/sticky_polished.html
Code:
<!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>
<!-- http://rockatee.com/temp/sticky_polished2.html
http://rockatee.com/temp/sticky_polished.html
-->
<style type="text/css">
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
body {
height:100%;
}
/* fix for Opera */
body:before {
content:"";
height:100%;
float:left;
width:0;
}
#outer {
width:760px;
background:#ffffcc;
margin:auto;
min-height:100%;
margin-top:-40px;/*footer height*/
}
* html #outer {
height:100%
}
#outer:after { /* clear floats */
content: "";
clear:both;
display:block;
}
#inner {
float:left;
height: 1%;
width:100%;
}
#header {
border-top:40px solid #fff;/* soak up negative margin*/
background:red;
width:760px;
}
#footer {
background:red;
width:760px;
margin:auto;
height:40px;/* must match negative margin and header soak up*/
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
<div id="header">
<h1>Sticky Footer</h1>
</div>
<div id="content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</div>
<div id="footer">Footer</div>
</body>
</html>
Maleika 2:
Code:
<!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>
<!-- http://rockatee.com/temp/sticky_polished2.html
http://rockatee.com/temp/sticky_polished.html
-->
<style type="text/css">
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
body {
background:#f0f0dd;
font:80%/1 "Lucida Grande", "Lucida Sans Unicode", Helvetica, sans-serif;
color:#222;
}
/* fix for Opera */
body:before {
content:"";
height:100%;
float:left;
width:0;
}
h2 {
line-height:2;
}
p {
line-height:1.6;
}
#wrap {
width:760px;
padding:10px;
background:#fff;
margin:auto;
min-height:100%;
margin-top:-100px; /* footer height + padding */
}
#wrap:after { /* clear floats */
content: "";
clear:both;
display:block;
}
* html #wrap {
height:100%
}
#masthead {
border-top:100px solid #fff;/* soak up negative margin*/
background:#f0f0dd;
float:left;
width:100%;
}
#masthead h1 {
color:#324650;
padding:10px;
line-height:2;
}
#content {
height: 1%; /* needed for IE8 + 1% instead of 100% to avoid large bottom space in IE6 */
padding:10px 0;
float:left;
width:100%;
}
#left_column {
width:390px;
padding-left:10px;
float:left;
}
#right_column {
width:320px;
margin-left:20px;
padding-right:10px;
float:right;
}
#sub_column {
width:720px;
margin:10px 0;
padding:10px 10px;
background:#d6e1e7;
float:left;
}
#footer {
background:#fff;
width:760px;
padding:10px;
margin:auto;
height:60px; /* must match negative margin and header soak up*/
}
#footer p {
background:#f0f0dd;
padding:10px;
line-height:3;
}
</style>
</head>
<body>
<div id="outer">
<div id="header">
<h1>Sticky Footer</h1>
</div>
<div id="content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p style="clear:both"></p>
test
</p>
</div>
</div>
<div id="footer">Footer</div>
</body>
</html>
Gary turner (bit shaky in opera and horizontal scrollbar appears)
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en"
xmlns="http://www.w3.org/1999/xhtml"
lang="en">
<head>
<meta name="generator"
content=
"HTML Tidy for Linux (vers 7 December 2008), see www.w3.org" />
<title></title>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<meta name="author"
content="Gary Turner" />
<style type="text/css">
/*<![CDATA[*/
html, body {
height:100%;
margin: 0;
padding: 0;
}
body {
border: 1px solid black; /* <<= key */
display: table;
vertical-align: top;
width: 100%;
}
.r {
display: table-row;
}
#main, #foot {
display: table-cell;
}
#foot {
border-top: 1px solid black;
height: 3em;
}
/*]]>*/
</style>
</head>
<body>
<div class="r">
<div id="main">
<h1>sticky footer demo</h1>
</div>
</div>
<div class="r">
<div id="foot">
<p>footer stuff</p>
</div>
</div>
</body>
</html>
Ryan Reese - this will drop the float in ie7 if page is squeezed and doesn't account for any elements that may be cleared in the content and will therefore break. It's also broken in ie6.)
Code:
<!doctype html>
<html>
<head>
<title>Sticky Footer-RyanReese.net</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
html, body {
height:100%;
position:relative;
}
#wrapper {
width:760px;
min-height:100%;
background:green;
margin:-3em auto 0;
}
* html #wrapper {
height:100%;
margin-top:0;
}
#header {
margin:auto 0;
background:blue;
height:3em;
width:760px;
border-top:3em solid blue;
}
* html #header {
margin-top:0;
}
#footer {
background:red;
height:3em;
margin:0 auto;
width:760px;
}
html>body #opera {
float:right;
height:100%;
width:0;
overflow:hidden;
}
</style>
</head>
<body>
<div id="opera"></div>
<div id="wrapper">
<div id="header">
<p>Look below and resize the viewport. It stays at the bottom!!</p>
</div>
<p>Text.</p>
<p>Text.</p>
<p>Text.</p>
<p>Text.</p>
<p>Text.</p>
<p>Text.</p>
<p>Text.</p>
<p>Text.</p>
<p>Text.</p>
<p>Text.</p>
<p>Text.</p>
<p>Text.</p>
</div>
<div id="footer">
<p>To go back to the article <a href="sticky-footer.php">click here</a>.</p>
</div>
</body>
</html>
Ryan 2 - works in opera but not in IE8)
Code:
<!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=utf-8" />
<title>Sticky Footer at Bottom</title>
<style type="text/css">
* {
margin:0;
padding:0
}
html, body {
height:100%;
position:relative
}
#outer {
width:760px;
background:#ffffcc;
margin:auto;
min-height:100%;
margin-top:-40px;/*footer height*/
}
* html #outer {
height:100%
}
#header {
border-top:40px solid #fff;/* soak up negative margin*/
background:red;
}
#footer {
background:red;
width:760px;
margin:auto;
height:40px;/* must match negative margin and header soak up*/
}
html>body #special {
width:1px;
position:absolute;
height:100%;
overflow:hidden;
}
</style>
</head>
<body>
<div id="outer">
<div id="special"></div>
<div id="header">
<h1>Sticky Footer</h1>
</div>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
</div>
<div id="footer">Footer</div>
</body>
</html>
Yuriklovsky - heavily based on my original but failed to take into account the clearing of floats in the content section. Works in opera and ie8 but the float clearing problem needs to be addressed. IE6 and 7 will drop the whole page if the window is made smaller (float clearing again)).
Code:
<!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=UTF-8" />
<title>Sticky Footer at Bottom - YuriKolovsky's try</title>
<style type="text/css">
*{margin:0;padding:0}
html,body{height:100%;}
#outer{
width:760px;
background:#ffffcc;
margin:auto;
min-height:100%;
margin-top:-42px;/*footer height + footer border*/
border-right:1px solid #000;
border-left:1px solid #000;
}
* html #outer{height:100%}
#header{
border-top:43px solid #000;/* soak up negative margin + header border */
background:red;
height:40px;
border-bottom:1px solid #000;
}
#footer {
background:red;
width:760px;
margin:auto;
height:40px;/* must match negative margin and header soak up*/
border:1px solid #000;
}
/*below is the opera/ie8 fix*/
#minHeight{ /*this is pauls hacky idea, this is a invisible 100% height div, that forces ie8 and opera to refresh/recalculate the page on any window height change, only opera/ie8 need this*/
float:right;/*float it, so that it does not affect anything with its position*/
height:100%;/*can be any percentage, but works best with 100%*/
width:0;/*not needed, but ill keep it here because im paranoid.*/
}
</style>
</head>
<body>
<div id="minHeight"></div>
<div id="outer">
<div id="header">
<h1>Sticky Footer</h1>
</div>
<p>soem balldly wirtten cntent, to se how teh sitckyy fotter wokrs, tihs cnontent can go on frovere, so tehre is no piont to all of tihs, teh olny inetresitng thnig here, is taht teh txet is sitll reaadble, for anoyne who redas wodrs and not lettres.
<br />
oh and teh sickty fooetr aslo works fnie.</p>
</div>
<div id="footer">Footer</div>
</body>
</html>
So there you have it
It may have seemed simple at the start but there are a lot of things to take into consideration. If you want to use a sticky footer method then you should think carefully whether you need the extra mark up and complexity in your layout.
Thanks for listening and see you next week with another light hearted quiz
Originally Posted by Paul O'B
Hi,
Let's discuss it with Simon after work today.
Chroniclemaster1, Founder of Earth Chronicle
Posting Permissions
Bookmarks