-2

I can't add a footer to the bottom of the page. It always displays in the middle of the page or something like that. It would be cool if there was some way to modify the footer div element to always show on the bottom of the page, even after adding more stuff to the center/top of the page (so not a fixed position).

Here's what I'm up to in CSS: (the id of the div is ofc "footer")

#footer {
    text-align: center;
    margin: 0px auto;
    position: bottom;
    bottom: 0px;
    font-size: 10px;
    padding: 10px;
}

I used something similar for my header (logo), and based on that I tried working the same with the footer with no success. Here's my header CSS, just for reference:

#logo {
    position: center;
    margin:0px auto;
    top:0px;
    text-align: center;
}

I used an image for the logo without any text and only text for the footer.

racecarjonathan
  • 1,244
  • 1
  • 11
  • 22
WhatWhatWhat
  • 103
  • 1
  • 1
  • 5
  • 2
    position: bottom? Please, go read some actual CSS documentation. – Diodeus - James MacFarlane Oct 17 '14 at 19:24
  • So, absolute, fixed, etc...? I confused myself with the logo (position: center), but anyway... – WhatWhatWhat Oct 17 '14 at 19:26
  • Go read this => http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page – Shiva Oct 17 '14 at 19:27
  • 1
    Your footer isn't touching the bottom of the page because there isn't enough content to fill the browser window. Here's one solution to fix that: http://ryanfait.com/html5-sticky-footer/. If you have enough content to fill the browser your footer will always be at the bottom. – hungerstar Oct 17 '14 at 19:31
  • See http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page?lq=1 or http://stackoverflow.com/questions/18469262/position-footer-at-bottom-of-page-having-fixed-header – Hashem Qolami Oct 17 '14 at 20:02

1 Answers1

0

You need to add the following styles to your footer div in order to make it stick to the bottom of your website:

#footer {
     position: absolute;
     bottom: 0;
}
Fahad Hasan
  • 10,231
  • 4
  • 29
  • 36