Win a copy of Svelte and Sapper in Action this week in the JavaScript forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Ron McLeod
  • Paul Clapham
  • Bear Bibeault
  • Junilu Lacar
Sheriffs:
  • Jeanne Boyarsky
  • Tim Cooke
  • Henry Wong
Saloon Keepers:
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • salvin francis
  • Frits Walraven
Bartenders:
  • Scott Selikoff
  • Piet Souris
  • Carey Brown

CSS Footer wont stick!

 
Greenhorn
Posts: 9
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hello People (hopefully some CSS gurus),

I am by no means a HTML/CSS expert but undertook the project of building my Dad a website for his business. Armed with two books and the internet I set about my task.

Everything was going so well unitll I realised that I could'nt fix my footer to the bottom of the page . It always seemed to leave a small gap on a page that wasn't 100% the size of the screen. When the content forced scrolling then the footer would stick.

I am using a purely CSS 3 column layout with a header section, a nav bar underneath, the main content beneath that followed by the footer. Any help/guidance/lessons would be gratefully received. Thanks in advance.


[ February 19, 2008: Message edited by: Bear Bibeault ]
 
Marshal
Posts: 67451
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Please read this.

Pare your code down to the minimum that demonstrates the issue and post it here. Please be sure to use UBB code tags (read this for more information).
 
Sam Jackson
Greenhorn
Posts: 9
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Ok, point taken.



my style sheet looks like this

 
Bear Bibeault
Marshal
Posts: 67451
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I can't see anywhere in your CSS where you're doing anything to affect the normal layout of the footer with the other div's; so yeah, it's not going to stick.

If you want to affect the layout, you'll need to set the positioning properties of the CSS rule applied to the footer.
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Change your browser's resolution so it is bigger and you will see that the gap grows even larger. If you want it to take up the full height of the page, you would probably ned to look into using percentages and a little JavaScrpt tweaking.

Eric
 
Sam Jackson
Greenhorn
Posts: 9
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi,

Thanks for the replies everybody. I don't want to use Javascript if I can help it as not everybody will have it enabled or will respond to the warning bar in IE to enable it.

As I said I'm not great at CSS so I dont under stand what I can put in the footer other than position being abolute or relative. If I make it absolute then it sticks the bottom but it shifts over to the bottom left of the screen and I don't seem to be able to get it to line back up in the middle column.
 
Bear Bibeault
Marshal
Posts: 67451
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Investigate the bottom CSS property.
 
Sam Jackson
Greenhorn
Posts: 9
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
bottom you say. Righto, I will give that a google and see what it comes up with.

Thanks
 
Eric Pascarello
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

Originally posted by Sam Jackson:
Hi,

Thanks for the replies everybody. I don't want to use Javascript if I can help it as not everybody will have it enabled or will respond to the warning bar in IE to enable it.



Sounds like you are developing on a local file system and not on a server if you are getting that error.

Eric
 
Oh. Hi guys! Look at this tiny ad:
Building a Better World in your Backyard by Paul Wheaton and Shawn Klassen-Koop
https://coderanch.com/wiki/718759/books/Building-World-Backyard-Paul-Wheaton
    Bookmark Topic Watch Topic
  • New Topic