• 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 Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

CSS Footer wont stick!

 
Greenhorn
Posts: 9
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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 ]
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Ok, point taken.



my style sheet looks like this

 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
 
Sheriff
Posts: 13411
Firefox Browser VI Editor Redhat
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
.
 
Sam Jackson
Greenhorn
Posts: 9
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Investigate the bottom CSS property.
 
Sam Jackson
Greenhorn
Posts: 9
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
 
reply
    Bookmark Topic Watch Topic
  • New Topic