Norman Posted February 16, 2010 Share Posted February 16, 2010 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 More sharing options...
jeffman Posted February 16, 2010 Share Posted February 16, 2010 Google sticky footerYou could also try things like making the min-height of your main element 100% or 90% Link to comment Share on other sites More sharing options...
Norman Posted February 16, 2010 Author Share Posted February 16, 2010 I've tried that, and right now I have this in my webpage:http://www.klayz.com/I really don't understand how to make it look good. Can you please help me? Link to comment Share on other sites More sharing options...
thescientist Posted February 16, 2010 Share Posted February 16, 2010 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 More sharing options...
Norman Posted February 17, 2010 Author Share Posted February 17, 2010 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. Link to comment Share on other sites More sharing options...
Synook Posted February 17, 2010 Share Posted February 17, 2010 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 More sharing options...
Norman Posted February 17, 2010 Author Share Posted February 17, 2010 Then with my current div structure I can't have it positioned to the end without having to change the structure? Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.