Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Nov 2008
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Footer always at the base of the page

    Is there a way i can position a div (in particular my footer) at the bottom of the page no matter what (even if the rest of the content does not reach the bottom of the page).

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello AaronH,
    Check out this method of a full height layout.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Nov 2008
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for the help. Worked it out. Easier than I thought

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by AaronH View Post
    Thanks for the help. Worked it out. Easier than I thought
    Hmm, if this is the page you're working on - http://bytecast.org/ByteCast/ you don't quite have it yet. Try putting some content in there and watch what happens.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Nov 2008
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hmm, if this is the page you're working on - http://bytecast.org/ByteCast/ you don't quite have it yet. Try putting some content in there and watch what happens.
    Yeh, ignore that. I just hadn't updated.

    Still need a little help, if you goto http://bytecast.org/click/ you should see the problem with the footer... :/ Any ideas?

    (also lots of fiddling for IE - I know)
    Last edited by AaronH; 06-13-2010 at 02:17 AM.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by AaronH View Post
    Any ideas?
    Yes, look again at that demo site I linked you to. You have not followed that example at all, there is a lot more to it than just positioning the footer.
    Use View Source and look at how it's laid out, I think there is a link to download/view the CSS.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If your problem is that the footer is 20 pixels above the bottom of the browser window, try below: -- if that's not the issue, ignore me lol.

    from what I can tell, you should really just move the "footer" div outside of "pagebackground"

    OR... you could just add margin-bottom:-20px; if you really want to keep it inside.

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I prefer this method for a sticky footer.

    http://www.cssstickyfooter.com/using...oter-code.html
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •