You have to be careful with 9999em as that may break the limit.
Oh yes, I think Opera has a negative margin limit of 32695px and setting it right below the limit is usually safer.
If I remember correctly even 999em can cause problems when large font sizes are added into the mix.
(though font-size should not matter in this case as it is not declared)
Thanks for everyone’s input in this thread and thanks for the easy fix Erik! 
That scroll limit slipped my mind! 
As Paul already said, it is 32767px.
But the +1px breaking number is extended by the thickness of the appearing crossing scroll bar, usually 17px.
Ah, Ok
I remember you sent me a PM several months ago about this Side Scroll Gallery and suggested that I remove the -999em and replace it with -30000px.
I left your comments in the css at the time, that’s what I was basing my info on.
#inner-wrap {
float:left;
margin-right:-30000px;[COLOR=DarkGreen]/*Be safe with Opera's limited negative margin of 32695px (-999em could cause problems with large font sizes)*/[/COLOR]
padding-left:20px;
}
Thanks for changing the value in your demo half a year ago!
I was not quite sure of the precise value at the time (I hope I did put an approximate sign before the number). Checking my later test files again I must say the precise value before breaking is actually 32768px. Wich also was what Raffles suggested in the discussion as it is 2 raised by 15.
What confused in various tests at the time was the influence of the crossing vertical scrollbar. It’s thickness adds to the safe value.
Now I checked Opera 10 regarding vertical margins, and I see no influence on the vertical margin limit by the eventual horizontal scrollbar.
In Opera the value -32768px on the before element is the “safe” limit in cancelling out the clearing. And a greater single vertical margin does not seem to break anything. I say single because a combined top and bottom margin greater than -32768px does break the cancelling effect.
Checking Safari 4 it seems to not have this limit, at least not on the vertical margin.
And I’m very happy to contribute!
I must say the precise value before breaking is actually 32768px.
It looks like it would be 32767px on the following test Erik.
<!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>Untitled Document</title>
<style>
* {
margin:0;
padding:0
}
#test {
height:32867px;
margin-top:-32768px;
width:100px;
background:red;
}
</style>
</head>
<body>
<div id="test">test</div>
</body>
</html>
There should be 100px of the red block showing but in Opera the whole 32867px is visible and stretches for miles down the page.
If you reduce it by 1px to 32767px then opera just shows 100px of the bottom as do other browsers (Safari4 and chrome 2 seems ok).
However when used in the sticky footer code on the body using the before element it seems that any larger value still works so it seems that there is no danger of breaking.
It seems Opera uses a 16-bit signed integer to store the value, which has the range -2^15 … (2^15)-1
What’s that in English 
Heh, sorry.
It seems Opera only plays ball if you use numbers in the range -32768 … 32767.
Thanks Simon
I “think” I’ve got a good way to remove the need for IE CC’s from this sticky footer. html:before is for Opera as you know, and #wrapper:before is for IE8. My only questions are… Why the width 0 in your guys versions? I don’t see any ill effects with it gone - I imagine just preventative huh? And, I never got this one, why can’t it be margin-top:-100% instead of a em or px value? I read Pauls explanation (based one width…) but I don’t get that. I know about the Opera max thingy. If I used ems (eg margin-top:-999em), in order to go over Operas max, the font size would have to be huge on what? Thanks!
As a side note, I just tested margin-top:-30000000000000000000px; in the latest Opera and it seems to work fine. I just added clear:both to the wrapper to test it.
html:before, #wrapper:before {
content:“”;
float:left;
height:100%;
margin-top:-100%;
}
<!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">
<style type="text/css">
* {
margin:0;
padding:0;
}
html, body {
height:100%;
background:#333;
}
#wrapper {
min-height:100%;
width:700px;
margin:0 auto;
background:#CCC;
}
html:before, #wrapper:before {
content:"";
float:left;
height:100%;
margin-top:-100%;
}
* html #wrapper {
height: 100%;
}
p {
font-size:1.8em;
font-weight:bold;
text-align:center;
padding:200px 0 80px;
}
#footer {
height:80px;
width:700px;
margin:-80px auto 0;
background:#999;
}
</style>
</head>
<body>
<div id="wrapper">
<p>#wrapper div</p>
</div>
<div id="footer"></div>
</body>
</html>
Say the width of said element wrapper is 700px. margin-top:-100% would only have it be -700px. Surely not enough :).
I know about the Opera max thingy. If I used ems (eg margin-top:-999em), in order to go over Operas max, the font size would have to be huge on what? Thanks!
Stomme had a thread where Opera was throwing up on the page, when I went to go debug I noticed that top:-9999em; was the cause. top:-999em; should be just fine however (that’s what I told stomme to switch it to)
Hi guys, coming in late but are you talking about the min-height bug that Opera has when using a sticky footer?
Luki, if you take a sticky footer (removing the fixes) and grab the bottom bar and vertically move the page up and down the sticky footer will not go with the page. It does not update the sticky footer placement, however if you horizontally move the page it will refresh.
The problem is a redraw problem
:root { overflow: auto; } also seems to be a fix
It triggers 100% height (in opera) but does not fix the redraw problem.
Is this what you’re looking for?
html {margin:0;height:100%;}
body {margin:0;height:100%;overflow-y:auto;}
:root { overflow: auto; } /*Opera*/
#container {min-height:100%;background:#6ea;}
#footer {height:80px;border:10px solid green;position:relative;margin-top:-100px;}
#wrap {padding-bottom:100px;}
/* demonstration */
p {margin:0;background:#f88;}
a.long {display:block;width:100px;}
a.long:active, a.long:focus {height:1000px;background:blue;}
/*IE6 */
* html #container {height:100%;}
* html body {overflow:visible;}
/* IE7 */
*+html body {overflow:visible;}
<body>
<div id="container">
<div id="wrap">
<a class="long" href="#">Larger page</a> Click elsewhere to restore.
<p>End of content</p>
</div>
</div>
<div id="footer">Sticky Footer - This test case seems to solve two scrollbar when the sticky footer touches the End of Content div (red background).</div>
</body>
No, Opera (untested elsewhere) still suffers
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>zzz</title>
<style>
html {margin:0;height:100%;}
body {margin:0;height:100%;overflow-y:auto;}
:root { overflow: auto; } /*Opera*/
#container {min-height:100%;background:#6ea;}
#footer {height:80px;border:10px solid green;position:relative;margin-top:-100px;}
#wrap {padding-bottom:100px;}
/* demonstration */
p {margin:0;background:#f88;}
a.long {display:block;width:100px;}
a.long:active, a.long:focus {height:1000px;background:blue;}
/*IE6 */
* html #container {height:100%;}
* html body {overflow:visible;}
/* IE7 */
*+html body {overflow:visible;}
</style>
</head><body>
<div id="container">
<div id="wrap">
<a class="long" href="#">Larger page</a> Click elsewhere to restore.
<p>End of content</p>
</div>
</div>
<div id="footer">Sticky Footer - This test case seems to solve two scrollbar when the sticky footer
touches the End of Content div (red background).</div>
</body>
</html>
Don’t have Opera maximized. On the very bottom edge you can adjust the vertical height of Opera. Have Opera get taller/shorter. The footer doesn’t adjust. That is what I’m talking about.
It is a redraw problem. Now grab a horizontal edge and move it. It fixes (or grab a corner and move it)
Hi Eric,
So what are you doing for float containment of any future floats in the wrapper div?
Overflow:hidden on the wrapper div causes problems with Opera as explained in Paul’s article.
If you read the comments at the bottom of the article you will see where Erik J. has found a fix for IE8 which allows the removal of the display:table which was used in the CC.
The fix is to use the clearfix method. By doing that we can fix the IE8 min-height bug with height:1%; on the wrapper:after block and contain future floats all in one fell swoop. 
I usually just take care of floats as I go, but, alright, then you could just say this and combine them. This seems to work well…
html:before, #wrapper:after {
content:“”;
float:left;
height:100%;
clear:both;
margin-top:-100%;
}
Eric, a quick test does indeed show that your code works for Opera and IE8.
It may be a good idea to test it further but at first glance it seems to be ok.