2

Possible Duplicate:
CSS sticky footer

My page has content where as users submit content, the page length increases. This is a problem for traditional designs for sticky footers as they tend to stick at the original location and end up just floating in the middle of the page instead.

Does anyone have any tips or tricks to make a sticky footer that will keep it down at the bottom even when the content enlarges the page size?

Thanks in advance.

Credit to AlienWebguy... after looking at the strucutre of my webpage we figured out adding a clear: both to a standard footer CSS fixed it.

Community
  • 1
  • 1
tnw
  • 13,521
  • 15
  • 70
  • 111

2 Answers2

3

EDIT: This is not a true "Sticky Footer" but this is what solved the OP's issue in this instance. For true sticky footer application try this:

Yep you'll want to use this CSS:

#sticky_footer {
    position:relative;
    clear:both;
    bottom:0;
    height:100px;
    width:100%;
}

Used like this: 

<body>

...
<div id="sticky_footer"></div>
</body>
Community
  • 1
  • 1
AlienWebguy
  • 76,997
  • 17
  • 122
  • 145
  • this only partially works for me. The content on the bottom of my page still pushes under the footer, though it does stay at the bottom. – tnw Jul 08 '11 at 20:54
  • That won't work in IE6 but I think it's the best solution since Microsoft is actively killing IE6 and it doesn't need any Javascript or hacks. – Jay Jul 08 '11 at 20:54
  • Only China and South Korea still use that browser. Web devs who still support it are doing just that - supporting its existence. @Tory if you have issues with content going over/under the footer, just adjust the z-index. Add like z-index:9999; to the #sticky_footer css to keep it on top of everything. – AlienWebguy Jul 08 '11 at 21:02
  • @AlienWebguy that doesn't fix anything though. that just makes it so my footer sits on top of the contentinstead which is also not what I want. I need the two separate. – tnw Jul 08 '11 at 21:04
  • To avoid the footer overlapping content you can set a padding-bottom: 100px; (equal to footer or more) on body – xec Jul 08 '11 at 21:06
  • @AlienWebguy additionally, this footer follows you around wherever you scroll which is just plain annoying. I need one that stays at the bottom of the page, not the window. – tnw Jul 08 '11 at 21:10
  • @Tory you never really specified what you wanted other than a sticky footer, nor did you mention in your question that you had a 2nd footer :) – AlienWebguy Jul 08 '11 at 21:11
  • @Tory.. that's not a sticky footer.. that's a footer haha just give the body a position:relative and the #sticky_footer a position:absolute then instead of position:fixed – AlienWebguy Jul 08 '11 at 21:12
  • Like this: http://jsfiddle.net/AlienWebguy/CCpJg/41/ – AlienWebguy Jul 08 '11 at 21:14
  • @AlienWebguy What? I never said anything about a 2nd footer, I don't know where you're getting that from... Either way, putting `position:absolute` puts it right in the middle of the page, which is the problem I had to begin with. – tnw Jul 08 '11 at 21:14
  • @AlienWebguy that's a *static* height for a page! My page is *not* static so that kind of implementation will *not* work. – tnw Jul 08 '11 at 21:15
  • @AlienWebguy let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/1272/discussion-between-tory-waterman-and-alienwebguy) – tnw Jul 08 '11 at 21:15
  • The content at the bottom of your page pushing under the footer, I interpreted as the original footer. My bad. Regardless that last jsfiddle should do exactly what you want. – AlienWebguy Jul 08 '11 at 21:15
  • During the chat we figured out there were floating divs above the footer that needed to be cleared so the footer could be positioned correctly. – AlienWebguy Jul 08 '11 at 21:29
2

I've had great success with this sticky footer implementation: http://ryanfait.com/sticky-footer/

Brandon Taylor
  • 33,823
  • 15
  • 104
  • 144