0

I've applied the CSS sticky footer tutorial that I got from here on my website, but for some reason I can't get it to work?

JSBin

Thanks in advance.

Lemmings19
  • 1,383
  • 3
  • 21
  • 34
Jamie Smith
  • 11
  • 1
  • 7

3 Answers3

1

Remove the top margin from #body and replace it with padding:

#body {
    width: 1200px;
    margin: 0 auto;
    overflow:auto;
    padding-top: 80px;
    padding-bottom: 170px;
}

add 100% height to html (not only body):

html, body {
  background-color: #FFF;
  margin: 0;
  padding: 0;
  height: 100%;
}

Full JSBin solution and preview

chrx
  • 3,524
  • 1
  • 15
  • 17
0

Did you apply the correct #footer id in your HTML code?

<div id="footer">

</div>
Lemmings19
  • 1,383
  • 3
  • 21
  • 34
NaturalDemon
  • 934
  • 1
  • 9
  • 21
  • Yes, can't see that I haven't? – Jamie Smith Apr 03 '13 at 22:19
  • i saw your code ... i suggest start over from the Warpper DIV with the 2 nested main and footer, the is most probably just a naming error. – NaturalDemon Apr 03 '13 at 22:22
  • you're trying to add ... something .. witch should have been added @ the start of project ... this is most probably why it want work ... you lost oversight. – NaturalDemon Apr 03 '13 at 22:25
  • Sorry, I can't see the issue? As far as I can see, I have a `#wrapper | #nav | #body | #footer` ?? – Jamie Smith Apr 03 '13 at 22:35
  • use the clean sticky code from the tutorial in a fresh start ... just start with the WRAP div and the 2 ntested main and footer div tag, that should probably work right away, than add your stuf carefully ... 1 by 1 instead of pasting everying .... add 1 thing @ a time and debug stuff before shit happens – NaturalDemon Apr 03 '13 at 22:45
0

I can not immediatly see what is wrong with your code (it is a lot of css, and you use strange tags like center). I swear by this version of the sticky footer however: http://ryanfait.com/sticky-footer/

Works fine for me and is very much legacy/cross browser compatible. Perhaps this is an option for you...

Pevara
  • 14,242
  • 1
  • 34
  • 47
  • I've tried RyanFait's sticky footer option, but for some reason it just doubles the height of my footer and doesn't make it sticky either? – Jamie Smith Apr 03 '13 at 22:36
  • I think you must be doing something wrong then, as it has always worked for me. Are you sure you are not applying any additional margins/padings on your wrapper or footer? – Pevara Apr 03 '13 at 22:43