This week's giveaway is in the EJB and other Java EE Technologies forum.
We're giving away four copies of EJB 3 in Action and have Debu Panda, Reza Rahman, Ryan Cuprak, and Michael Remijan on-line!
See this thread for details.
The moose likes HTML, CSS and JavaScript and the fly likes CSS Footer wont stick! Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of EJB 3 in Action this week in the EJB and other Java EE Technologies forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "CSS Footer wont stick!" Watch "CSS Footer wont stick!" New topic
Author

CSS Footer wont stick!

Sam Jackson
Greenhorn

Joined: Jan 30, 2008
Posts: 9
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

Joined: Jan 10, 2002
Posts: 60050
    
  65

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).


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Sam Jackson
Greenhorn

Joined: Jan 30, 2008
Posts: 9
Ok, point taken.



my style sheet looks like this

Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60050
    
  65

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

Joined: Nov 08, 2001
Posts: 15376
    
    6
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

Joined: Dec 11, 2004
Posts: 13410

.


Java API J2EE API Servlet Spec JSP Spec How to ask a question... Simple Servlet Examples jsonf
Sam Jackson
Greenhorn

Joined: Jan 30, 2008
Posts: 9
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

Joined: Jan 10, 2002
Posts: 60050
    
  65

Investigate the bottom CSS property.
Sam Jackson
Greenhorn

Joined: Jan 30, 2008
Posts: 9
bottom you say. Righto, I will give that a google and see what it comes up with.

Thanks
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
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
 
subject: CSS Footer wont stick!
 
Similar Threads
page layout using struts template refresh the whole page
swap content picture/text
Design a footer CSS
Floating Footer
Flying Saucer/ iText: Page numbers do not appear on each page