Jump to content

Footer At The End Of The Page


Norman
 Share

Recommended Posts

I have a footer in CSS using a bg image. The problem come with short pages. The footer is not at the end and it's really bad to see. Then, is there a way I can put the footer to be always at the screen bottom of the page?

Link to comment
Share on other sites

I think you're footer is going to have to be in your wrapper, or explain a little better where the footer is supposed to be, and in what browser(s) you're testing in.

Link to comment
Share on other sites

I've followed the instructions here: http://ryanfait.com/resources/footer-stick...bottom-of-page/ and the xhtml example is:

   1.  <html>   2.	 <head>   3.		 <link rel="stylesheet" href="layout.css" ... />   4.	 </head>   5.	 <body>   6.		 <div class="wrapper">   7.			 <p>Your website content here.</p>   8.			 <div class="push"></div>   9.		 </div>  10.		 <div class="footer">  11.			 <p>Copyright (c) 2008</p>  12.		 </div>  13.	 </body>  14. </html>

The footer isn't in the wrapper.Tested on Firefox 3.5.7 and in the latest versions of IE and Safari.

Edited by Norman
Link to comment
Share on other sites

The footer isn't supposed to be in the wrapper - the general idea is that you have a 100% min-height wrapper (hacked to work in IE6), with the footer beneath that having negative margin to bring it up into view. However, since you also have lots of other things outside the wrapper (header, ads, etc.), they are pushing everything down and therefore your footer isn't in view any more.Solution: everything except the footer must be inside the .wrapper element.P.S. The Man in Blue has a better version of the sticky footer available at http://www.themaninblue.com/experiment/footerStickAlt/

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...