• Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

CSS Footer wont stick!

 
Sam Jackson
Greenhorn
Posts: 9
  • 0
  • 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 ]
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64205
83
IntelliJ IDE Java jQuery Mac Mac OS X
  • 0
  • 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
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Ok, point taken.



my style sheet looks like this

 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64205
83
IntelliJ IDE Java jQuery Mac Mac OS X
  • 0
  • 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.
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • 0
  • 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
 
Ben Souther
Sheriff
Posts: 13411
Firefox Browser Redhat VI Editor
 
Sam Jackson
Greenhorn
Posts: 9
  • 0
  • 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
Author and ninkuma
Marshal
Pie
Posts: 64205
83
IntelliJ IDE Java jQuery Mac Mac OS X
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Investigate the bottom CSS property.
 
Sam Jackson
Greenhorn
Posts: 9
  • 0
  • 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
Rancher
Posts: 15385
6
  • 0
  • 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
 
I agree. Here's the link: http://aspose.com/file-tools
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic