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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem keeping the footer to the bottom of a dynamic page

    Hi,
    I am creating a site for which i have created the header and footer in separate files to be included in all the pages. the problem is that the content of the page will be dynamically generated and so it wont have a fixed length.
    I want the footer to appear at the end of the content, which happens, but when the content is too less and fits within the browsers visible space, i want the footer to appear at the bottom of the page and not immediately after the end of content.
    then i added the following code to the footer.css file to keep it at the bottom
    #footer
    {
    text-align:center;
    font: 11px "Courier New", monospace;
    clear:both;
    position:absolute;
    bottom:1em;
    width:98%
    }
    but now it remains fixed at tha position and the extra dynamic content flows past it.
    How to get what i want

    SOMEONE PLZ HELP

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    http://ryanfait.com/sticky-footer/

    Try this

    Frank

    And these:-
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    What happens when you remove the higlighted:
    Code:
    #footer 
    {
    text-align:center;
    font: 11px "Courier New", monospace;
    clear:both;
    position:absolute;
    bottom:1em;
    width:98%
    }
    If nothing works, provide us a link, if none bringing up the code will also help

    Edit:
    Frank, sorry. You're much quicker
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #4
    New to the CF scene
    Join Date
    May 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanx effpeetee and rangana for your immediate replis.

    i tried the sticky-footer code but i guess, since i have positions in the body part it becoms a little messy. i am yet to try the other links & will surely do.

    removing the highlighted code puts the footer back on top after the previously positioned content
    Last edited by hvolvo; 05-22-2008 at 11:51 AM.

  • #5
    New to the CF scene
    Join Date
    May 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey guys, i think i almost got the sticky-footer working
    Thanks a lot


  •  

    Posting Permissions

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