A CSS Sticky Footer that Works in 2009 (Chrome too)

I don’t even care what it does- the duct tape RULES.

Does this sticky footer work if additional content or HTML is injected into the page via innerHTML or DOM? If a DIV is injected into the page and increases the height of the page, will your sticky footer account for that?

i find that this works a treat when my content is short–footer sticks as expected; but when the content is longer, i have an annoying gap at the bottom below the footer in firefox3 and chrome. in ie6, the footer sits on the bottom, but then, it’s ie6.

any thoughts as to what could be causing this gap?

only margin: 0 auto; to center my layout.

i think i’m complicating the situation with 3 columns, set up like this:

with #innerWrap and .sidebar floated left and #content floated right and all the applicable sticky footer particulars.

any thoughts?

check your email chris

For the clear fix, have you thought of using the overflow trick?

http://www.quirksmode.org/css/clearing.html

I have used this for a while and it is great because it’s way less to remember and I have had little to no problems with it.

overflow: auto; or overflow: hidden; cover all of the use cases quite nicely.

Plus it will cut your CSS almost in half.

Steve,

I’m using your sticky footer method, and it’s working well, however in IE6 its making the page super long (even with no text or anything in the main body), and causing a gap between my header and top section of my content. Any ideas why this is happening? I’m not using any margin or anything on any height portions.

[…] come px invece di pt o em. Articolo originariamente pubblicato su http://www.cssstickyfooter.com e http://www.stever.ca, all rights reserved. Tradotto con l’esplicito consenso […]

I’d like to see you put a zip file with all the needed files online, that we could easily download to play around with.

I had to grab your whole website, which is a lot more than I really needed.

Just a note for ASP.net websites: form tag breaks the sticky footer layout - to fix that, add form tag to the height rule:

html, body, form, #wrap {height: 100%;}

and everything will work perfectly

*Note - that’s the form tag that sits outside all the divs on the page. Thanks for posting this one ReTox, I don’t work with ASP.net (Stever)

It works only in Firefox…

*Giorgos, I think you’re doing it wrong (stever)

@requiredName, if you take a look at the “how too page” you’ll see I gave credit to a 2004 article from A List Apart, Exploring footers. It pre-dates the Man in Blue by 1 year.

Cameron’s HTML code is indeed almost identical, but there are some differences in the CSS.

In the #wrap div, same as #nonFooter in Man in Blue, I don’t have any positioning and I add a height:auto. In the footer I added a clear:both and, yes, I stuck in the old trusty clearfix hack onto the #main div.

Before I came up with this solution I tried a bunch of various ones I could find in Google (ryan faits, man-in-blue, and others I can’t remember) and was always finding situations where it broke in one browser or another, or when using floating two column layouts. So I started over, mixed and matched, cut and pasted, added things, deleted things, hacked and hacked until I found a solution that I could actually make work.

Frankly with all the mixing, matching and hacking I stumbled blindly into a solution that works and it happened to be an improvement on other solutions out there.

So it’s 90% Cameron Adams’s, 90% Ryan Fait’s, 90% Bobby Van Der Sluis’s (the ‘A List Apart’ article), 90% WC3’s, 90% browser developers (though i would like to shoot some of them) and, most of all, 90% of the web designers out there looking for ways to make footers stick to the bottom of a page.

Thanks for this, it’s indeed the most robust solution. If anyone’s having trouble with gaps, it’s most likely due to CSS’s collapsing margins. You mention this but let me allow a quick explanation, since it can be a frustrating factor. Many people are not aware of this but margins collapse between nested elements, too, not only adjacent ones. It’s pretty counter intuitive but important here. Basically, avoid content elements at the very top or bottom “merging” their margins out into the those elements that need to have top/bottom margins of zero (div#wrap, body etc.) Solutions? Read this piece by Eric Meyer:
http://www.complexspiral.com/publications/uncollapsing-margins/

If you keep that in mind, you won’t have trouble and you can work your way around any layout limitation.

Also, make sure to set the body elemt’s margin-top and margin-bottom to zero. Default browser styles give it margins of ca. 8px which will trip your sticky footer up, so don’t forget that.

[…] having something “glued” onto the side of your browser window. Please give credits to Steve Hatcher and Ryan Faits, as they were the ones who discovered these […]

ok, requiredName, if you insist. Sheesh.

And yeah, there was a fair bit of dumb luck involved. I’m not a CSS wizard by any means. Collapsing margins still dumbfound me regularly.

x3ro, kind of hard to tell what might be the problem there with all those tables. I haven’t use a table based layout in years and avoid them like the plague.

Just a guess, I see some of your table cells have heights, they might be causing the same problem as using margins, instead of padding, on elements and making it all push down by the total height of all those cell heights??? Just a wild guess though.

Would this work if you are using the 960 grid system?

I am new at programming web pages…

I am using VisualStudio 2008 and had to remove the “body >” from the following line:

body > #wrap {height: auto; min-height: 100%;}

It works fine with out the body > part but with body > the footer sticks to the size of the window and disregards the size of the content.

Anyone else run into this?

[…] footer). So you can check for more information the site http://www.cssstickyfooter.com and the post A CSS Sticky Footer that Works in 2009 (Chrome too) which is with many comments - both by Steve […]

Howdy Steve,

I created a completely stripped down page, with no additional css to try out your solution. I was getting vertical scroll bars (in both firefox and safari). Firebug showed the only margin being set was the margin-bottom to match the footer. Then it dawned on me that it might be the default margin causing the problem. I explicitly added margin: 0px after you set the height to 100% and it took care of the problem.

[…] sehr an Cameron Adams’ “footerStick Alt” erinnert. Sie ist aber, wie der Autor in einem Kommentar beteuert, an wenigen Stellen verändert/modernisiert. Schön einfach und cross-browser […]

oh no! - just checked today and this is a bit broken in IE8.

If you refresh the page, then expand the browsers height, the footer stays at the point it was refreshed at. On other browsers it expands with the browser’s height.

Its almost as though the min-height 100% is being ignored. I’ve noticed the same thing on Opera on the PC.

So close, but then they bring another frickin browser out.

will post back if I solve it but no luck yet….

I do not know what is going on with my computer but none of the sticky css bottom bars are working in firefox, chrome, or IE. Any ideas what is wrong here?

make that an IE7 and IE6 style sheet. doh!

@seth, without more detail I don’t know what the problem might be.

First off thanks so much for this solution!

I’ve found a problem though:

Like some others, I made a completely stripped down page and used the CSS provided and saw vertical scroll bars on chrome and firefox.

Adding
* {margin:0;padding:0;}
solves the problem.

The reason scrollbars don’t show up on cssstickyfooter.com is because this extra line of CSS is included at the top of the stylesheet at http://www.cssstickyfooter.com/finerstyle.css

Great idea - although I am having a slight problem with it. The footer is sticking as it should but it is below the page. So if I am on a page with little content I have to scroll to see the footer. I am using a two column floated layout (left col float left and right col float right) but even when I remove these I still have the same problem so I don’t think this is causing it?

So I started again with a completely stripped down version and I am still getting the same problem with the actual code used?

Any ideas? The site I am working on is not online but I can email you the code if you would be so kind as to help me out?

Thanks

Using the css sticky footer but for some reason I have to scroll to get to the footer, even though the page content fits snugly on the page. It seems the 100% height wrap div is pushing it too far down so I need to scroll to see it. Any ideas?

Without sounding pompous (and I don’t usually butt-in like this) but sorry to say that I actually came up with the original idea way back in 2003 and all others have been copies of my technique since.:) (either intentionally or unintentionally).

I don’t mind my ideas being copied/used anyway and the proof can be seen in this thread dated December 2003 (and mentioned on Position Is Everything around the same time).

http://www.sitepoint.com/forums/showthread.php?t=143801

This pre-dates all other versions that I know of.

A new improved sticky footer can be found here.
http://www.pmob.co.uk/temp/sticky-footer.htm

@Paul O’Brien, well then we all owe you a little gratitude it seems!

@Ian, yes someone else pointed out that IE8 is now causing problems. I’ve yet to test it myself.

Thanks Paul O’brien for that solution, I’ll check ot out when I get time - IE8 definitely behaves like Opera unless its in compatability mode. Seems a shame to use this mode just to get one part of the layout working so could be an alternative.

I’m wondering if there is a way to use CSS Tables for this. If there is maybe that’s the way to go and then we use some kind of hack for ie 6 and 7…

I forgot to mention the above code should only be given to IE8 via conditional comments

I can’t get this solution to work on my site. The site is made with Drupal’s CMS and it’s called http://www.brainplay.ie

I’ve tried to tweak it in many different ways of doing it but I’m not a programmer so the answer could be starring me in the face.

The relevant CSS is found at the bottom of http://brainplay.ie/themes/lightfantastic/style.css

I would appreciate any advice? Thanks

I also forgot to mention that the footer now needs to be outside of the container and needs to be moved down.

		< -- /ie7contenthack -->

	< -- /wrapper -->

< -- /footer -->
< -- /container -->

@Grant, yes any of the main elements of the sticky layout must not have set heights, except the footer, or use vertical margins, else it breaks the 100% and auto heights.

Instead use separate divs for boxes inside, those can have set heights if you needed to use them. I believe you can even use vertical margins on other divs that sit inside the content div.

Hello All,
I was led to this solution through the CSS Creator forums. I tried it and I have a huge gapping margin that appears in most browsers between my footer and content. I think I have one or two “height”s in all of my CSS (not on the major divs) and I have tried replacing all (but one) of my vertical margins with padding. I am lost : is my JavaScript a problem? Are my floats a problem? I mentioned this problem in the forum and no one has replied. Any help would be appreciated. (http://www.fussandfeathers.com/about-sarahwrose.html).

Hello. I’m having a lot of problems with this and I cannot seem to find a solution. I am wondering if my javascript is interfering. I am getting a huge gap in between my footer and my content. I have looked at all the margins / heights in the content and I cannot seem to figure out what is causing the gap. I am not looking for someone to solve my problem, I just need someone to point out what is wrong…
Any help will be credited on my blog!

Cancel that, I think I’ve got this working. I needed to enclose my Blueprint div’s within your wrap div.

Sorry, new to all this

I’ll finsish typing before submitting this time:

I seem to have a problem when I use this method on a page with short content (in IE7 and FF - IE6 seems to work!). I’m trying to produce a centered two column website with a footer whose background colour is the same as the edges (ie. area around the centered two columns). When the content is short, the ‘main’ container doesn’t reach the footer (ie. there is a gap between the content and footer). I’m pretty sure this isn’t to do with my code, because if you change the background colour of Stever’s example code and strip out most of the content, you can see the effect.

I’ve been trying to produce this simple website using CSS for ages now - I’m hoping that this will be the answer I’ve been looking for… Any ideas much appreciated.

hi there - i’m having a slight prob with the stickyfooter: if there is enough content on the page, it works fine in IE FF & Safari. but if there is minimal content, it only stays on the bottom in IE. i’ve deduced that the problem is that i have my body set to display:table. however this was the only way i found to keep my background image in position (otherwise it would move to the left and out of the window as i shrunk my browser window, while all my other content stayed put & scroll bars appear, etc.)
does this problem ring a bell to anyone?

that did it! thanks!!

Just wanted to say thanks for a nice clean, compliant peice of work

After much gnashing of teeth and pulling of what little hair I finally got it to work using the even column technique out of the Tripoli framework. I basically made the innerwrapper another even column, which in theory you could do all day long with as many wrappers as you would like, each one 100% of the last. I have to do a bit more testing but so far it seems to work with long content and short without any problems back to IE6.

Yes mate, so far it seems to be working both with long and short content. You’ll have to look at the Tripoli framework to see how he does his equal columns to better understand but it does work and if my theory holds true you could have an infinite number of wrappers all 100% long.

I’ve sent you an email btw.

Been looking for something like this awhile. Thanks for the fix!

Hi Brendon,

You have some errors in your html and css logic.

First of all you have wrapped the deprecated center tag around the whole page and this will kill the 100% height in one fell swoop because it carries no height that #wrap can use and therefore all heights collapse to auto.

Remove the center tag and just use auto side margins on #wrap to center the page.

At the bottom of the html you have an opening div above the footer when it should be a closing div.

Remember that #wrap must close before the footer starts and then the footer can also be centred with auto margins.

Then adjust the css as follows.

#wrap{margin:auto}
#wrapper-footer {
margin:-83px auto 0; /* negative value of footer height */
}

If you make those corrections the page will work as I have tested it locally on your code.

THANKS! This is the 20th solution I checked and THE FIRST that worked! I LOVE YOU ;D

I’m having trouble with the sticky footer in Explorer 5.5. I’ve checked your page at http://www.cssstickyfooter.com/ in net renderer http://ipinfo.info/netrenderer/ and like my page at http://www.maisiefantaisie.co.uk/test/index.html it doesn’t center. I’ve heard that normally to center a layout in IE5.5 you would style the body tag with text-align:center;
then the #wrap with text-align:left;
But with your sticky footer it looks like this doesn’t work. Basically I think explorer 5.5 doesn’t like the auto margins. I’m an amateur and would really appreciate it if you could make it work in explorer 5.5. I can’t use the footer otherwise and I really like it!

This post is just great, it’s the best I’ve found, thank you very much for sharing it!
However I encounter an issue, maybe you will be able to explain it. At some point the footer was stuck to the bottom of the page and moved according to the browser size (very good), but when I reached the limit of the content, it disappeared suddenly instead of disappearing gradually. After some researches, I found that my content had the “float: left;” property, and that is what caused the problem. Do you have any idea why?

It seems to be the solution! thank you very much!

I’m wondering…
Does it work on Camino 1.6.7 and Firefox 3.0.5?
I seem to have some troubles in these browsers..

Anyway, thank you for this!

@ Tom: IE (and some other browsers at times) has a rounding bug and if the viewport is an odd number of pixels high it rounds the measurement up or down and makes the whole thing 1px out.

There isn’t much you can do about it except to leave the footer overhanging the bottom at by 1px to cover the gap. Of course this means the vertical scrollbar gets triggered because the page is 1px higher than the viewport.

This isn’t anything to do with the footer method but just that it exposes the browsers inadequacies. IE (ie6 mainly)will also round absolute measurements of “bottom” and “right” by 1px and will always be 1px out on odd pixel measurements in a fluid container.

Thanks Paul, much appreciated.

This may be a dumb question but I’ll ask anyways. If one of my pages does not contain enough content to fill the browser window, shouldn’t the footer still stick to the bottom? It’s not doing that for me, any advice?

Hi there,

I’m trying to use the CSS sticky footer together with the 960 grid system, but I just can’t seem to get it to work. I’m trying to implement it at this site – hopefully some of you will be able to help me.

http://larsvmusic.dk/site/musik/

Thanks for the IE8 fix Paul O’Brien “Display:table and height declaration.”
#outer{
display:table;
height:100%;
}

Worked great!

HELP Please! I’ve got the sticky footer working great. It’s works like a dream…thanks.

I have a client using Adobe Contribute to edit their content. When they edit a page (wysiwyg mode) the footer appears half the way up the screen and hides content. When they are typing content above the footer, it doesn’t push down and the content goes underneath the footer.

Works great in Browsers, but a huge problem if clients want to update content.

Does anybody know of any solutions that may help? Do i need to change the Z Index or can i hide it when not viewed in a browser?

Thanks in Advance.

My sticky footer won’t stay put in IE5. I thought it was just mine so I checked your website and same problem. Though this one http://ryanfait.com/sticky-footer/ does stay at the bottom of the page. Using windows XP IE5 (vers 7.0.5730). Any soulutions?

@daron, the numbers of users still on IE5 is so low you should just ignore them, seriously. Here at the w3schools website they show global browser stats. They stopped reporting IE5 last year when it was only 0.5%, and still declining. Project that rate of decline forward to today and it might be around 0.1%, or less. That’s 1 visitor for every 1000, or just about nobody.

I am trying to get the sticky footer working on this project: http://sfbc.vintom.com

I have had working a million times on other projects, and I have no idea why it isn’t working for me here.

Any thoughts?

Im not sure what is going on with this , but I cant seem to get it to work on FF Safari.

I have attempted many variations, and eventually copied and pasted the two examples and still no-go. It just sticks the footer at the bottom of the page:

Am I missing something, or have I not had enough caffeine?

html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 150px;} /* must be same height as the footer */
#footer {position: relative; margin-top: -150px; /* negative value of footer height */ height: 150px; clear:both;}

Hi
i rewriting the code for my new website because safari, chrome and opera dont accept the background position on the bottom and i found your trick, its almost work fine, less the footer.
id add some more pixels to the bottom. does anyone had this problem?

regards

This is a great use of CSS. We used this for our site, and got it working under a canned program for our CRM in IE 6,7,8 and FF. Unfortunately, when we tried to apply it to a Joomla Template, we are running into some problems in IE6 (I know, I know).

We’ve tried hacking the site and CSS to only mess with IE6 to try and make it work.

What happens is, we get the footer bar pasted right in the middle of the page.

(http://www.strudellstudios.com/ingredients-services/web-development)

Any thoughts on what we could be doing wrong?

You are the man! Thank you! Stupid mistake…

Thanks a lot of the quick reply and example. But I don’t think I can use a border because I use transparent png’s for shadows and the border would show through.
Also, I’m applying a background on wrap so I need the wrap div to start below the header and not be overlayed on top…

Maybe it’s best if I wait until the real site is online to show you. Also, I understand if you don’t have time to deal with this. If it doesn’t work I can just make sure all pages have enough content to push the footer all the way down.

I found a secondary problem on my site. It turns out I had a two column div inside my wrapper class. That is all fine and good, except that in IE6, the footer floats up to the bottom of the shorter div. I wrote some javascript to make the two columns the same. This ended up pushing the footer to the correct spot (at the bottom.

I have very little CSS experience, but thanks to comments on this site and elsewhere I’ve been able to progress from footer in the middle of the page, to a sticky footer with a scroll bar, to almost perfect. While the footer is now sticky and the page looks fine, there is still something pushing it down a bit so that a scroll bar appears. I’ve tried to find where there might be a height or padding issue, but this is where I’ve gotten stuck. If anyone could lend and a hand and point out my error(s) I would be grateful. Btw, I’m using the Copyblogger theme for Wordpress and have been editing the .css and .php pages that came with the theme. Here’s my site: http://jamesgibbon.org

Thanks!

I have posted about this before, but I didn’t get much response.

Does anybody know why the ‘Footer’ appears above content in WYSIWYG mode or in editing software.

It is hiding my content and my customers are complaining they can’t see or change the text in edit mode because the footer is hiding content.

Does anybody know how i can ressolve this please? Any help would be gratefully received.

Thanks in advance.

Hi Dave, The fact is that no wysiwyg can handle CSS properly (none that i’ve seen anyway).

For instance DWCS3 can only handle the very simplest of css in design view. Anything more than the basics and it is useless. If something as expensive as DWcs3 can’t handle it then it’s likely that most other editors will fail also at some stage.

Don’t you have the ability to turn off styles while editing or some similar feature?

Guys,

Thanks for your replies. Appreciated.

The thing is, i can work around it as i mainly work through the code. However, my client is using Adobe Contribute to edit their pages. As soon as they choose to edit a page, it goes into WYSIWIG mode and the footer appears above all of the text.

It’s proving to be an issue. I would love to be able to turn this off whilst in edit mode, but unsure if this can be done.

Thanks again,

Dave

I’ve hacked something using overflow:hidden on the body, which obviously is not suitable for pages where the content goes further down the page… but at least it will show you what I’m trying to accomplish:

http://www.sachagreif.com/clients/tfc/forgot-thankyou.php

Note that I’ve only tested this in firefox, don’t know if it works in other browsers.

And here’s an additional explanation of what I need to do:

http://www.sachagreif.com/clients/tfc/stickyfooter.jpg

@kyle: You only have scrolling because your content is higher than the viewport. That’s how the sticky footer is supposed to work. It only sits on the bottom of the window if there is little content.

If the content is greater than the viewport height then the footer sits at the end of the document which means you will need to scroll to see it.

A footer that sits at the bottom of the viewport at all times is a fixed positioned footer and is a different technique completely.

If you test your page with little content then you will see that the footer sits at the bottom of the window without a scrollbar (in Firefox anyway as I didn’t test others).

I don’t know why, but I just couldn’t get it to work. I’ll take one more look at your updated example, but I think I need to read up on CSS a little more so that I can understand the underlying principles better and not just copy/paste your code.

I have some little minor improvement for your article … in “How to Use the Sticky Footer” there is a line missing which sets both margin and padding to zero for all elements … took me long to find out, although it’s so mundane (shame on me)

But thank you a lot, that script works and will really help me!

I’ve used this footer before and never had problems. He always worked verry good and I still love website’s with a sticky footer.
But now in my new design i just can’t get it right.In IE6 it looks good but not in IE7, FF3, SAFARI, OPERA. They all have the same problem:
A gap between the footer and the content if the content isn’t long enough. I looked at the code for houres now and just can’t find it.
You can find the website here:
http://www.restaurant-cms.be/restaurant4/index.php

The homepage is made extra long to see if that works, if you click on ‘Historiek’ in the menu at the right you find an extra short page (here you can find the problem).

This works fine for my site. However as soon as I start using padding-top, I get a vertical scroll bar and I need to scroll down to see the footer.

I am not using any margin top or bottom settings.

I figured out the cause of my issue, it has to do with my overall #wrap having ‘position:relative’ as a style. I recreated the csssticky samplepage, added longer text and assigned ‘position:relative’ to the #wrap, and was able to recreate the problem. If you’re using IE 7, and zoom the page under 100% (try 75%) the footer will ‘float’ up the page.

You can see my test page here:
http://thenetforward.com/projects/test.htm

Not sure what to do about it, if anything, but that’s my issue right now.

Hi Stever

Please add ikarlik comment on July 9th to the http://www.cssstickyfooter.com/using-sticky-footer-code.html .net area if possible and that is:
A note for ASP.NET developers:

If your div#wrap resides inside of form tag, make sure to change CSS from:
“body > #wrap {…}” to
“form > #wrap {…}”

I spent 2 hours trying to get this working until i read that post …thanks IKarlik

Cheers
Ed

Excellent. I’ve had countless solutions to this problem over the years and until now I’ve never found one that just *works*.

This one works great for me, and I’m pretty sure I’ll be using it in 95% of all sites from now on.
Thanks!!!

@Paul O’Brien, thank you for your July 23rd post, it was the solution to my problem of the code being correct but a vertical scroll bar appearing when there was little content on the page.

If anyone else has the same problem, and you are sure your code is right, it might be helpful to know that your footer’s height means a sum of its actual pixel height, and any top or bottom padding it may have (and the height of a border like Jim’s case). Thanks again Paul.

Perhaps this could be mentioned in the CSS Sticky Footer instructions?

Awesome code snippet, much cleaner than some of the others I’ve run across. I do have a question about it, though. What is up with this line:

body > #wrap {height: auto; min-height: 100%;}

What is the right carrot for, I don’t understand what it’s purpose. Can someone enlighten me?

@Victor - without your code we can’t help :). Just go back to the demo in the article and compare what you have with what is in your page. It’s so easy it can’t fail to work unless you deviate from the example

@Jason: The right arrow is the child selector (combinator) which will select a direct child of the element concerned. It is used as a hack to hide code from ie6 as it doesn’t understand the child selector. I suggest however that you don’t use this method because it can fail in IE7 and use the 100% method I posted somewhere above.
#wrap{min-height:100%;}
* html #wrap{height:100%}

@Ian Storm: You misunderstand the problem with margins.:) There are no problems with margins inside the 100% high container (as long as they don’t stick out of the top and bottom of the container). The advice referred to margins on the actual 100% high container itself.

If you apply margins to the container itself (e.g. to move it away from the body) then the container will no longer be 100% high but will be 100% high + margins and therefore never fit in the initial viewport.

Margin on elements inside the container are fine (as long as you avoid collapsing margins on the first and last elements in your page).

Hi Paul
Yeah, your right, without the code u cant do anything.
But i forgot to writr again telling that i solved trh problem, i had a wrong value on the body.
Its working and thanks for this trick
u can see it working @ http://www.vitorneves.com and also on my 1st wordpress template @ http://webappsdepot.vitorneves.com

Regards

I’ve got this to work but I am facing a bit of a problem in the main div.
I have two columns, one menu on the left at 170px wide and next to it I have a content div.
I want the content div to expand 100% in height and width according to the window size, however when ever I set the width at 100% it div overflow to right causing a scroll bar to see the rest of the screen. and the height just gets ignored.

is there any way to accomplish this?

this is my html

I have sideMenu and content floating left with sideMenu’s left property set to 0px and it’s width to 170px. The content div has the left property set to 170px which is the sideMenu’s width.

Thanks

@Sam,
I think using position:absolute may be screwing it up.

Try the following:
#wrapcentering
{
margin-left: auto;
margin-right: auto;
width: 1000px;
}

That’s it!

I use it on all my sites for centring the main wrap and have no issues with this Sticky Footer technique in any browser. Hope that helps.

Should the footer on the “How to Use the Sticky Footer Code” page also be sticky? If yes, then something on that page went wrong as in Firefox 3.0.14 on Ubuntu Hardy the footer is way down at the end of that page… :/

@Stever: ah ok, thanks for the fast clarifying. Do you have an example of how to get the footer to always stick at the end of the browser window no matter how long the scrollable content is? This was a huge issue I could only solve with the aid JavaScript in IE6 so far…

@Justin, interesting! This solution was published just before IE8 was released and others have mentioned problems with IE8. Your solution, while a total hack, might just do the trick.

The code above should be supplied only to IE8 using conditional comments though (The comment system removed the actual code I posted )

thank you so much!! saved me so much time trying to do it myself!

never mind, fixed it. extra div tag was closing my wrap too early. doh.

Dear Stever, or anyone who can help:

I have attempted to implement your lovely and indispensable solution here:
http://www.rentlarasbrain.com

It works splendidly on IE 7 & Chrome, but I have a gap at the bottom in the latest Firefox (3.5+ or so). My code validates, I’ve ruthless slashed away any vertical padding or margins, but still it is not behaving. Any advice?

My css is here:
http://www.rentlarasbrain.com/css/main.css

I have used position: relative; a couple times, to get around the need for margins to put things in the right spot. I hope that isn’t what is breaking it. :-/

If you want a short footer, like say 15px, and have little (or no) content on the page, it most definitely does not work in Safari or any recent version of WebKit. Neither does Fait’s.

@Nathan Duran : show me where it isn’t working in Safari and I’ll fix it for you

i have the solution about ie6 margin=”0 auto”. i have put

#footer {
position: relative;
margin-top: -85px!important;

in a “if IE 6″

thanks again

oh by the way, this only breaks in IE, FF works just fine.

Hey there. This has been racking my head, since I think I have it right. The footer is in fact sticking as expected, but I can’t seem to get rid of the vertical scroll bar. I created a test page to see if it was the content within #main, but even on a blank page the scroll bar is there, but yet not on the example page, so I am in error somewhere.

here’s a link: http://tr.im/FbFf

It’s funny how long I’ve gone without this being necessary, but now that I need it, I’m losing my mind. ha.

Thanks in advance,
Rich

thanks paul. wow, that was a quick response I really appreciate it.

Rich

Thanks for this- it works great!

It’s been mentioned a couple of times above for asp.net integration, but just to reiterate and consolidate:

To make this work correctly in an asp.net page add the ‘form’ selector to the first, and replace ‘body’ with ‘form’ in the second.

html, form, body, #wrap {
height: 100%;
}
form > #wrap {
height: auto; min-height: 100%;
}

I can’t get this to cooperate with IE6, it’s working fine in ie7,8, FF but not IE6. The footer is pushed up a few pixels from the bottom. Any ideas what could be causing it?

Thanks Paul, setting the height did the trick but now I’m facing another problem.

In IE6 the scroll bars don’t appear until the window is half way up the content.
In IE7+ and FF the scroll bars appear when they should but the footer keeps going all the up to the header. It doesn’t stop at the point where the content starts like it does in the test page shown in this site, it stops when it reaches the header.

Thanks Paul, I varified that the code is valid. you cant see the page because it is an intranet app.

I will paste the css here for you to see.

The divs are set like this:
[div id=’wrap’]
[div id=’divHeader’][/div]
[div id=’main’ class=’clearfix’]
[div id=’divSideMenu’][/div]
[div id=’divContent’]
[div id=’homeascx’]
[div id=’newscontainer]
[div id=’divNewsMain’][/div]
[div id=’EvTitle’][/div]
[/div] - end newscontainer
[/div] - end homeascx
[/div] - end divContent
[/div] - end main
[/div] - end wrap
[div id=’footer’][/div]

Here is the CSS:
/* BEGIN WEB PAGE STRUCTURE CSS*/
*
{
margin: 0;
padding:0;
}
html, body, form, #wrap {
height: 100%;
overflow:hidden;
}
form > #wrap
{
height: auto;
min-height: 100%;
}

#main {
padding-bottom: 20px;
height:100%;
} /* must be same height as the footer */
* html #main
{
height:100%;
padding-bottom: 20px;
}
#footer
{
position: relative;
margin-top: -20px; /* negative value of footer height */
height: 20px;
clear:both;
overflow:hidden;
}
.clearfix:after
{
content: “.”;
display: block;
height: 0px;
clear: both;
visibility: hidden;
}
.clearfix
{
display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix
{
height: 1%;
}
.clearfix {display: block;}
/* End hide from IE-mac */

#divHeader
{
width:100%;
height:100px;
clear:both;
}
#divSideMenu
{
position:absolute;
top: 100px;
width: 180px;
bottom:20px;
height:100%;
overflow: auto;
background-color: #666666;
}
#divContent
{
overflow: auto;
position: absolute;
top: 100px;
left: 180px;
right: 0px;
bottom: 20px;
}
#homeascx
{
width:800px;
height:525px;
}

Man ! the french translation sucks. Sounds like it has been google translated like shit.
Anyway, i wont use duct tape anymore.
thanks a lot !

@Mike - the footer is on the bottom :). it’s 200px high and sits on the bottom. Change the height if you don’t want it so tall and then change the negative margins and padding to compensate (as mentioned in the article).

This solution seems to work great for liquid layouts but what about fixed width layouts?

My footer will not display properly if it is outside of the wrap (#maincontainer in this case)

Any solutions? For now I’ve just stuck the footer back inside the wrap until I can do more research.

@Willem: You don’t seem to have added the padding-bottom needed to preserve the footer space.

The element called #mainvp should have 150px padding bottom.

#mainvp {
width: 900px;
overflow: hidden;
font-family: verdana;
font-size:13px;
line-height: 1.5;
margin-top:15px;
color:#646464;
text-align:justify;
padding-bottom:150px;
}

I can’t get it to work. I haven’t done any webdesign in nearly five years. I gave up because of god damn IE.
Either way, I did some looking around and found the YUI Grids, however, cannot get this technique to work with it. I even tried to search for some answers, but have as of yet to find anything useful. I’ve got on that always at the bottom of the viewport, but bottom of the page? Seems impossible.

If anyone has some pointers, I stuck the page on a fee hoster, it’s the link.
This is just for me to get back into it rather than being anything specific.

@alex, things on the site do need an overhaul to ensure its ie8 friendly. Not sure when I may get around to that though, current work load is HEAVY.

I have used the sticky footer and it works brilliantly, but I need to add a background image that sits on the top of the footer that moves up and down with the footer but the background image stops under any content on the page. I’ve tried several ways but cannot get it to work.

@Larraine:Does the image above the footer slide under the content above or stop short of it?

If it slides underneath then just absolutely position it from within the footer itself (position:relative on the footer as a stacking context)and then adjust the z-indexes accordingly so that the image goes under the content above.

If you want content to stop above the footer image then just increase the height of the footer itself and use the top part for the image.

@Anthony: IE8 can be made to work using display;table:

#wrap{
display:table;
height:100%;
}

Thanks Paul. I have tried this and it still doesn’t work…? perhaps i didn’t do it properly (still fairly new at it!)? its a 2 col layout - maybe its something else in the style throwing it out… i’ve posted the website. let me know if you have any more ideas… Thanks in advance!!

I think i’ve found the problem. don’t think its a css/sticky footer thing, but IE8 doesn’t seem to like a form input, so i will work on that first and hopefully that fixes it! thanks for the tips though.

I think I found two ways to break it (only tested in FF3.5 and Chrome 4.whatever):

1) I had a sidebar with absolute positioning. The sidebar would elongate to reveal a contact form when a link was clicked, causing it to go off the bottom of the page. It went _through_ the footer, rather than pushing it down. The footer maintained its original position with the sidebar behind it. I fixed this by rearranging my CSS and using relative positioning for the sidebar instead.

2) Setting a line-height in the footer alway created some extra space out the bottom of the page, even when the line-height was 20px and the height of the footer was 50px.

Hi
I am having problems with the sticky footer in ie6. it is sticking at the bottom of the window and not recognising the content above it.

following is my code - the negative margin in the main div does not seem to affect the footer.

Any help would be great

#main {
background: #FFF;
margin-right:0;
margin-top: -7px;
margin-bottom: 0;
overflow:hidden;
width:990px;
padding-bottom: 100px;
}

#wrap {
margin: 0 auto;
width: 990px;
height: 100%;
}

body > #wrap{
height: auto !important;
min-height: 100%;
}

#footer_wrapper {
background: url(../images/footer.png) repeat;
margin: -100px 0 0 0;
height: 100px;
clear:both;
position:relative;
}

.clearfix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {
display: inline-block;
}

/* Hides from IE-mac \*/
* html .clearfix {
height: 1%;
}

.clearfix {
display: block;
}

/* End hide from IE-mac */

Can somebody help me. I got it that the footer is always in the bottom. But when it has to get pushed away because of the content, it doesnt go smoothly, but its like bamm. and the footer is gone. how can i fix this?

Shadowbox.init({
language: “nl”,
players: [”qt”, “img”]
});

$(document).ready(
function(){
$(’#slide’).innerfade({
animationtype: ‘fade’,
speed: 3000,
timeout: 6000,
type: ‘random_start’,
containerheight: ‘auto’
});
}
);

home
services
portfolio
contact
setPage()

(c) Mystic Solutions   |   
home    
services   
portfolio   
contact   
inloggen

you need the css too?

Damn xD

i post the css.
* {margin:0;padding:0;}
body{
background-image: url(’../images/bg_alles.png’);
margin: 0 auto;
font-family: verdana;
font-size: 10pt;
color: #ededed;
overflow-y: scroll;
}

a{
text-decoration: none;
border: none;
}
a:focus{
outline: none;
}
a:link {color:#ededed} /* unvisited link */
a:visited {color:#ededed} /* visited link */
a:hover {color: white} /* mouse over link */
a:active {color:#ededed} /* selected link */
img{
border: none;
}
h1{
font-family: Verdana;
font-size: 18pt;
color: white;
margin-bottom: 0px;
margin-top: 0px;
padding-top: 10px;
text-align: right;
font-weight: 100;
}
h2{
font-family: Verdana;
font-size: 18pt;
color: white;
float: left;
margin-bottom: 0px;
margin-top: 0px;
padding-top: 10px;
text-align: left;
font-weight: 100;
width: 400px;
}
#top{
background-image: url(’../images/bg_top.png’);
height: 127px;
width: 100%;
}
#top_schaduw{
background-image: url(’../images/schaduw_menu.png’);
height: 25px;
width: 100%;
}
#top_960{
width: 960px;
height: auto;
margin: 0 auto;
}
#logo{
background-image: url(’../images/logo.png’);
height: 126px;
width: 185px;
margin-left: 75px;
float: left;
}
#menu{
background: url(’../images/bg_menu2.png’);
background-position: right;
background-repeat: no-repeat;
float: right;
list-style: none;
width: 398px;
height: 126px;
margin: 0px;

}
#menu li{
background: url(’../images/bg_menu.png’);
background-repeat: no-repeat;
width: 99px;
height: 126px;
float: left;
text-align: center;
}
#menu a{
display: block;
text-decoration: none;
height: 30px;
color: #b8b8b8;
padding-top: 99px;
border: none;
}
#menu a:hover{
color: white;
}
#menu .current{
color: white;
}
#banner{
background-image: url(’../images/bg_banner.png’);
width: 960px;
height: 245px;
background-repeat: no-repeat;
margin: 0 auto;
}
#slide{
margin: 0 auto;
width: 837px;
padding-top: 27px;
padding-right: 5px;
list-style: none;
}
#content_schaduw_boven{
background-image: url(’../images/schaduw_content_boven.png’);
width: 100%;
height: 25px;
}
#content_schaduw_onder{
background-image: url(’../images/schaduw_content_onder.png’);
background-repeat: repeat-x;
width: 100%;
height: 25px;
float: left;
}
#content{
background-image: url(’../images/bg_content.png’);
background-repeat: repeat-x;
float: left;
width: 100%;
min-height: 300px;
background-color: #838282;
padding-bottom: 10px;
}
#content_tekst{
width: 920px;
height: auto;
margin: 0 auto;
text-align: justify;
}

#tekst_welkom{
width: 600px;
float: left;
}
#tekst_update{
width: 278px;
float: left;
text-align: justify;
}
#tekst_update img{
margin-top: 5px;
margin-bottom: 5px;
}
#tekst_update img:hover{
margin-top: 5px;
margin-bottom: 5px;
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
}

#tekst_contact{
width: 960px;
height: auto;
}

#tekst_contact .collum1{
width: 600px;
float: left;
}
#tekst_contact .collum2{
width: 278px;
float: left;
}
#tekst_contact .form{
width: 278px;
float: left;
}

#content_lijn{
background-image: url(’../images/content_lijn.png’);
width: 1px;
height: 422px;
float: left;
margin-left: 20px;
margin-right: 20px;
}
html, body, #wrap {
height: 100%;
}
body > #wrap {height: auto; min-height: 100%;}
#content_schaduw_onder{
padding-bottom: 19px;} /* must be same height as the footer */
#footer {
position: relative;
margin-top: -19px; /* negative value of footer height */
height: 19px;
clear: both;
width: 100%;

}

#footer a:link {color:#b8b8b8} /* unvisited link */
#footer a:visited {color:#b8b8b8} /* visited link */
#footer a:hover {color: white} /* mouse over link */
#footer a:active {color:#b8b8b8} /* selected link */
.footer{
height: 19px;
background-image: url(’../images/bg_footer.png’);
width: 100%;
}
.footer_tekst{
color: #b8b8b8;
width: 960px;
text-align: right;
margin: 0 auto;
font-size: 8pt;
padding-top: 3px;
}
.clearfix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

textarea{
text-align: left top;
}

If you need the html just give me a call

So I ask again… has anyone gotten this footer working with YUI Grid layouts?

@Bas: I assume we are talking about the site linked to under your name (Mystic media).

What browser are you having problems in as I don’t see the effect you mention. the content isn’t near the footer because you have put a 300px min-height on the content anyway.

I can see IE6 is completely broken but I guess you are not supporting that browser.

IE7 has double scrollbars on the window because you set the body element to scroll. Move that to html instead.

html{overflow-y:scroll}

However I can’t see this sudden jump in the footer effect you mentioned. What page does this happen on and what do I have to do to make it happen?

Fantastic, it was really satisfying to see this work in my own code - thanks for sharing this.

@bas: Ok I can see the problem in Safari and it’s caused by the 100% float that’s holding the shadow at the bottom.

If an element is 100% wide it doesn’t need to be floated in most cases (and may indeed cause some issues) so remove the float but add clear:both and then you can remove the clearfix class from that div also.

#content_schaduw_onder {
position: relative;
background-image: url(’../images/schaduw_content_onder.png’);
background-repeat: repeat-x;
width: 100%;
height: 25px;
padding-bottom: 19px;
/*float: left;*/
clear:both;
}

div id=”content_schaduw_onder”

Hello, Stever!

May I be able to use your code on my website that I’m building for commercial purposes?

Yes you can - Stever

Great work, works perfectly, I’m curious though, if anyone has any ideas on how to code the height of the footer to be a bit more variable. I’m creating a wordpress theme where updates will be dynamically added to the footer, which means the height will change over time. Any thoughts

Hi,
I am facing a problem while using this code in IE6. I have introduced a according (JQuery) in my page. So while loading the page for the first time its working fine. But when click on the according the page height is inclreasing so the footer remains there.

Please suggest me.

Thanks

hmmm, i can’t get it to work in Wordpress. In wich php-page do put the code? (index.php or page.php)

many thanx in advance!

hi,

i am using this code in my site designing but its not working, please suggest me something.

#header
{
position: absolute; margin-top:15px;
left: 5px;
padding: 10px;
height: 42px;
width: 100%;
border: 1px thin #0099FF;
}

#pic{
position: absolute;
left: 15px;
margin-top: 72px;
height: 179px;
width: 621px;
border: 1px thin #0099FF;
}
#text
{
position: absolute;
left: 15px;
margin-top: 250px;
height: 37px;
width: 621px;
border:medium #0099FF;
text-align: left;
text color:#9A0214;
padding:5px;

}

h1 {
font-size: 18px;
color: #990000;
font-weight: bold;
text-align: left;
}
h2 {
font-size: 15px;
color: #3333FF;
font-weight: bold;
}

h3 {
font-size: 18px;
color: #000000
font-weight: bold;
}

#left {
padding: 3px;
position: absolute;
left: 15px;
margin-top: 290px;
width: 299px;
height: 150px;
size: 8px;
border: 2px solid #0099FF;
}

#center {
padding: 3px;
position: absolute;
margin-top: 290px;
left: 330px;
height: 150px;
width: 298px;
size: 8px;
border: 2px solid #0099FF;
}

#left1 {
padding: 3px;
position: absolute;
left: 15px;
margin-top: 456px;
width: 299px;
height: 150px;
size: 8px;
border: 2px solid #0099FF;
}

#center1 {
padding: 3px;
position: absolute;
margin-top: 456px;
left: 330px;
height: 150px;
width: 298px;
size: 8px;
border: 2px solid #0099FF;
}

ul {
list-style-image: url(images/icon-arrow-dred.gif);
}

#sidebar {

position: absolute;
padding: 3px;
left: 675px;
margin-top: 73px;
width: 300px;
height: 374px;
border: 2px thin #0099FF;
text color:#990000;
size: 8px;

}

#topnav {
position: absolute;
margin-top: 15px;
left: 675px;
font-size: 14px;
height: 42px;
width: 533px;
}

#textside
{
background-color:#E0E0E0;
}

#content {
padding: 3px;
position: absolute;
left: 15px;
margin-top: 290px;
width: 612px;
border: 2px solid #0099FF;
height:auto;
padding-bottom: 3em;
}

#text li {
float:left;
padding:2px;
}

html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

#main {padding-bottom: 150px;} /* must be same height as the footer */

#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}

.clearfix:after {content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;}

.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

I forgot to say that my footer consists of an image that repeats in the x-axis…dont know if that matters or helps the situation

[edit] Correction: the footer is overlapping the content.

I managed to get this work, but there is one tiny problem I think. Visit http://www.keesblok.nl and you will see on every page that they scroll vertically a few pixels. I know that this has something to do with margins and paddings, but I can’t find it. Can someone help me with this?

Can anyone please give me some assistance?

I have a container inside of a container and the footer moves up the page. You can see the page at…
http://www.rls.net/mockup/Test.html

Any ideas as to what I am doing wrong? Any assistance would be greatly appreciated.

@Randy - You have used absolute positioning for the columns which means they are removed from the flow and there is no way that a footer (even a sticky footer) can sit at the bottom of all columns. It’s just impossible.

Absolute positioning shouldn’t be used for columns and you should float the columns instead.

Something roughly like this:

* html #page_container{height:1000%}
/* MAIN WRAPPER */
#main_wrapper {
float:left;
min-height:620px;
margin-left: 10px;
width: 790px;
padding: 0px 0px;
/* margin: 10px 0px;*/
background: #66FF66;
display:inline;
}
#left_window {
min-height:620px;
float:left;
width: 300px;
background: #66CCFF;
}
#right_window {
float:right;
width: 460px;
padding: 0 10px;
background: #CC99FF;
}

You will of course need to add the clearfix class to the parents of the floats to allow the backgrounds to extend.

@Paul - Thanks! That worked wonders. Except now I notice that there is a white horizontal space at the very end of the page. Any ideas as to what could cause that?

http://www.rls.net/mockup/Test.html

@Randy - take out the dot from within the quotation marks in the content property.
/* CLEAR FIX */
.clearfix:after {content: ” “;
display: block;
height: 0;
clear: both;
visibility: hidden;}

Also change this line:

* html, #page_container {height: 100%;}

to this instead:

* html #page_container {height: 100%;}

@Matthew: You should be able to use it on grid pages but you may have to create a wrapper to hold the whole page and to control the height. As long as you imitate the sticky footer structure correctly it should work.

Hello,
First of all I’d like to say thank you for share this technique, and good job creating it.

I have been trying to use it on a Wordpress theme I am developing, it works fine except that on pages with little or no content there is still a scrollbar. I tried to add overflow: hidden to the #footer, but that didn’t fix the problem…

Here is the page in question:
http://uselessgeek.com/youjiii/wordpress/contact-us/

and here is the css I use for the page:
http://uselessgeek.com/youjiii/wordpress/wp-content/themes/test1/style.css

Does anyone know what might be causing the scrollbar to appear please?

@Matthew - I’d need to see the page you tried it on to see where you went wrong.:)

The technique is simple but it has to be right and in the right structure and applied correctly.

As shown by some of the other posters above who have tried using a sticky footer on absolute elements there are of course some things that can’t be done because they have the wrong set up to start with.

Hello, I tried using this technique and I got the extra margin at the bottom to make room for the footer, but the footer itself is still floating up at the top of the page. I’m really stumped (Currently building the site on localhost so it’s not on the web at the moment.)

@Paul, click my name. The only thing I’ve managed is to get a footer to constantly stick to the bottom (always on screen).
At the moment, I’ve sort of just learnt to live with it.

Thanks paul

@Jenny

your topbox, header and shadow divs are sitting outside the wrapper div. Only your footer should be outside the wrapper.

Your footer is pusged lower by the heights of those other divs sitting above the wrapper. Wrapper is set to 100%, then footer gets sucked up under by negative margin. So adding anything else outside of wrapper makes your total page height larger than 100%.

[…] old post for the original version has gotten nearly 300 comments so far. Clearly my most popular post on this blog. I am however […]

Question for aspx developers … I have applied this to my masterpage for my web application and it works great for all the browsers.

The only issue is that I am getting a scroll bar on the window when there shouldn’t be. I have checked the solution and can not find any margins, paddings, and/or borders. I just started the design process and so below is the only css file im using currently and its only linked to the masterpage.

If anyone has any tips and/or ideas on how to solve this I am all ears because I can’t find the issue, thanks and sorry for the lengthy post.

html, body, form, #wrap {height: 100%;}
form > #wrap {height: auto;
min-height: 100%;}
#main {overflow:auto;
padding-bottom: 150px;}
/* Footer */
#footer {position: relative;
margin-top: -150px;
height: 150px;
clear:both;
background: url(./images/Background.jpg) repeat-x left top;}
#foot p{text-align: center;
font-size: 12px;}
/*Opera Fix*/
body:before {content:”";
height:100%;
float:left;
width:0;
margin-top:-32767px;}
.IE8Fix /*aspx menu fix */
{ z-index: 1000; }

@Paul … haha wow thank you. I just started webdesign and I knew I was over complicating the issue, thanks again.

@Shauna, recheck your styles. Something in there is interfering with your footer and forcing the scroll bar.

your footer is supposed to be 50px high but somewhere else in there you also call it 24px high, inside programm.css. Also check margins on your paragraphs in the footer. if your content pushes the footer height to be slightly bigger than intended footer dimensions then you get the scroll bar. I often make my footer taller than it needs to be to allow for wiggle room in the content.

@Shauna: Same problem as Tom above:

html,body{margin:0;padding:0}

@Jon: It’s an addition.

The html and body elements are set to 100%. However browsers apply default margin/padding to html/body so unless you set them to zero you get:

100% + 1 or 2 em padding = bigger than 100%

You also have to take care with the first and last elements on your page because the default margin may collapse on the top or extend through the bottom. Setting a padding top and bottom on inner elements will keep the margin inside the container.

I have the sticky footer completely working, except for one little problem. If the page content is wider than the viewport (making a horizontal scroll bar appear at the bottom of the window) my footer appears on top of (not above) the horizontal scroll bar. In this case, if I try to click the scroll bar rather than the footer, I can’t. I can set the z-index of the footer to -1, so it is behind the scrollbar, but I still can’t scroll low enough on the page to see the footer above the horizontal scroll bar.
Here’s an example image: http://img519.imageshack.us/img519/9680/footerp.png
Any ideas? Thanks for your help.

@Paul-
I more-or-less solved the problem. The scrollbar was actually for the #main div, not the viewport. So, the #main div was overflowing, not the whole page. Removing the #main {overflow: auto;} CSS property fixed this (in FF 3.6.3).

THANK YOU! I’ve looked for something like this for a long time and really appreciate the code and work you’ve all put into it.

Just an observation… On your sample site, and this site, Reduce the window smaller than your site width, then move the horizontal scroll. Headers, footers, and the main content div no longer fill the width of the window, so if you have background images in there they will not show to the edge of the window.

I’ve discovered that if the wrap has a fixed width, the IE8 conditional statement results in the page not resizing automatically in IE8. I thought at first that perhaps the problem was linked to something specific to the page I was working on, but I ran a test, and the problem occurs even on simple pages that have nothing more than the wrap, main and footer div’s with a bit of text. I also noticed that the footer does not set all the way at the bottom of the window, there being a gap of 20 or so pixels.

Below are links to three test page. The first one is a fixed width and has the conditional statement. It does not resize automatically in IE8. The second one is a fixed width and does not have the statement. It works fine. The third one has the conditional statement, but does not have a fixed width. It also works fine. In all other ways the three are the same.

http://www.thayersgraphic.com/tests/test-with_statement.html
http://www.thayersgraphic.com/tests/test-no_statement.html
http://www.thayersgraphic.com/tests/test-not_fixed_width.html

Now, I have stared at the code on the page that does not resize automatically until I feel like I’m going blind and see no differences between it and the code taken from this site, other than the added widths and background colors. Am I missing something or is this a real bug?

OOPS…
HTML
I used [div id=”content-container”]
to wrap around [section id=”content”]

and similarly for the footer
I wrapped [div id=”ft-container”]
arround [footer]

Yes, I was aware that, when you dragged the bottom of the frame, the footer did not move in any of the examples. I rewrote my post several times, and I now see that I forgot to mention in the final version that I was talking about the footer in test-with_statement.html not moving even when you hit the Maximize button or resized the window with the corner handle, a problem the other two examples don’t have.

I made the change you suggested, and it fixed the problem, for which I thank you, but I need to point out that I was following the instructions as they are at cssstickyfooter.com. If the instructions on that site are wrong, shouldn’t they be corrected?

Below is an exact copy of the text on the page that opens when you click on the “View the Sticky Footer CSS” link. As you can see, the conditional statement does not have height:100%!important, and body > #wrap has the height set at auto.

* {margin:0;padding:0;}

/* must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to total height and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

#main {overflow:auto;
padding-bottom: 150px;} /* must be same height as the footer */

#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
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*/
}

/* IMPORTANT

You also need to include this conditional style in the of your HTML file

#wrap {display:table;}

*/

Thanks Maureen and Paul, I will fix that.

@roxanne:

Your javascript is inserting a div into the flow below the footer and taking up space.

Its seems to be a ui-datepicker.

You could try setting it’s top position to zero although I don’t know if that will interfere with the elements function.

.ui-helper-hidden-accessible {
top:0;
}

@Paul Thanks so much, it works, and “Sticky Footer” goes on to more infamy

@Kerry - Yes, resetting all elements to 0 margins and padding is a must mandatory for any style sheet.

This is the first line of any style sheet I build: * {margin:0;padding:0;}

As for stretching your content area down to touch the footer?? not sure about that one

thanks for the”definitive”on multiple full length columns.

@Jonathan,a typo/syntax error on my part I believe. I had [if !IE7] when it should have been [if !IE 7] on the conditional style statement. I had an extra space between the if and the ! and no space between the IE and 7. Seems those conditionals are white space dependent.

@Jonathan: #page is 1150px wide and has overflow:auto set.

Inside #page there is an element called .pagepost which has 110px padding on each side and contains an image that is 960px wide.

960 + 110 + 110 =1180px which is 30px too big the #page and hence the scrollbars appear.

Reduce the padding on .pagepost by 15px each side or increase the with of #page by 30px.

Hi!,
I love this sticky footer, I cant get it to fully work, I keep getting a vertical scrollbar on my #main, any ideas?

@John, recheck your IE conditional argument. I had a syntax/typo error thats since been corrected. There needs to be a space between IE and 7 like this [if !IE 7]

jHeg, I see what you mean, if you resize the width to less then the content width, then scroll over, that part of footer turns white.

Off hand I dont have an answer to that one. It’s not that the footer is moving, you can see all the other elements in the footer are still where they should be, just the background colors get overwriten to white, except on images.

Until I can find an answer, or someone can suggest one, I would not be too concerned as resizing window width to less than content width would be a very rare behavior for most users, i think.

@jheg: That has nothing to do with the sticky footer as such and will occur on most sites.

It is simply the fact that the footer is 100% wide and when the viewport is closed smaller say to 600px wide then the background only extends to 600px.

If you then scroll outside this area there will be no background because the viewport is is only 600px wide and 100% = 600px still.

The solution is to set a min-width on the footer to the same width as the element that causes the scroll. In stevers case this would be 820px as follows:

#footer {
background: #444444 url(’images/footer.gif’) repeat-x;
color:#ffffff;
font-size:11px;
font-family:Verdana, Arial, sans-serif;
min-width:820px
}

Now the background will be intact

The CSS mastery that is Mr. O’brien delivers yet again!

Thankyou for this code. It now works great but I did have problems getting it to work accross all browsers.

Basically because of the multilayered nature of the site I needed to include:

#wrap {display:table;}

to CSS as full screen in Mozilla, Opera and Chrome the footer was appearing at the end of the content div NOT the bottom of the window.

Not sure if this is an IIS/ASP.net windows thing

Finally something that worked on my website
I used top and bottom margins, but it still worked, thank you!

just want to note, that body { display: table; } can break the stricky footer, but its still a perfect solution!! thx so much

Hi, thanks for this code, works great.
However I ran into one problem with Opera (version 10.63). The overflow:auto for the #main div makes background images (within other div’s of the #main section) disappear. This is probably a weird bug in Opera, but maybe this knowledge will be of use.

I removed the overflow:auto altogether and it still works in FF, Saf, Chrome and Opera.

So I was wondering why overflow:auto is needed. For IE or older versions of the standard browser?

Cheers,
Maggy

Hi Paul,

Thanks for the explanation. Before implenting your css for the sticky footer I had put a clearfix div, that’s why everything still was ok. I didn’t know that you could clear floats with overflow:auto, thanks!

It could be something else of course, but it worked fine, untill I added the overflow:auto and when I removed that, it worked again..

The html (I am still working on it, so far from finished ;-)) is here:
http://dev.operatiecreatie.nl/projects/pedro/index.html

It’s the polaroid frame background with the image on top. The image was still shown only the polaroid background was hidden.

Thanks for your time!

Cheers, Maggy

Hi Paul,

Wow thanks! That really makes sence. It seems I have learned clearfix the wrong way from the beginning, while it does the job most of the times I have had trouble which I didn’t understand.
Thanks a lot for pointing this out to me!

Cheers,
Maggy