SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2012
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    push footer to the bottom on all pages

    hello

    i'm trying to make the footer stay at the bottom with the only css rules i know for this part

    Code:
    #footer {
    position: absolute;
    bottom:0;
    }
    it's working great for example in the 404 page

    http://ms.wpcoder.co.il/?single=AAAA

    but in the home page:
    http://ms.wpcoder.co.il/

    is stuck in the middle

    thanks for any help in this issue

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,104
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    What you are looking for is known as a "sticky footer", and it's not easy to d properly in CSS, but a reliable method is detailed here:

    http://www.sitepoint.com/forums/show...66#post1239966

    Read through that post and see if it makes sense. It's important to follow it in every detail, as the details are really important for this.

    Let us know how you go.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2012
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi ralph

    did it was easy but two problems:

    1. how can i make the WIDTH of the main content be in Proportion relatively to the footer, example:
    http://ms.wpcoder.co.il/?page_id=54

    2. In firefox the footer is floating in the air and with firebug i saw there is margin-top 30px and margin-bottom 30px, i can't see where that come from .
    I suspect because i had to close the wrapper div outside of the footer (for sticky footer) and center it with:

    Code:
    margin:2em auto
    something with this rule throw 30px top and bottom, I may be right ?
    if that correct, i will be more then happay to get explanation about that.

    thanks

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,104
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    You haven't got the sticky footer quite right yet. At the moment, the footer is off screen. Make sure to read though the tutorial carefully and check you code against it at each step.

    Quote Originally Posted by largo6 View Post
    how can i make the WIDTH of the main content be in Proportion relatively to the footer
    Not sure what you mean. They look the same width to me.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2012
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    maybe i played exectly when you looked,look good to me,please look again.

    and i mean height , sorry, i mean the content will strech until the footer no matter how much content is there.

    can you advice me how can i improve my layout without affect the sticky footer ?
    at the moment i set width and center (margin 2em auto ) to each div i have in my page and i think it's not the best
    do it.

    and did you notice the firefox issue ?

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You didn't implement the sticky footer correctly but that on its own will not be enough to make the middle section stretch as the sticky footer can only have one wrapper and that must hold all your content except the footer. No other wrappers allowed because of the way that css works.

    You can provide the full length middle section using my overlay technique (ie7+) which will overlay the background colour on that middle section. However you will have to follow the instructions exactly which you have not done for the footer already

    It would be better for you to build your layout around the sticky footer structure rather than the other way around as there is no other way to do this.

    Here is an example showing the effect I think you are looking for. Be aware that you could have the layout as a max-width layout instead of fixed width but that the content in the header and footer would still need to remain at a fixed height otherwise it will overlap.

    As you have an awful lot of code in that site already you will have to be careful that the structure matches my example exactly.

    Please read the faq on the sticky footer again and on 100% height as they hold important concepts that need to be understood before you can manipulate or make changes to the layout.

  7. #7
    SitePoint Enthusiast
    Join Date
    Jan 2012
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi paul

    thanks very much for the help.
    i was a bit lazy and looked only for final code and didn't notice the instructions with any code with them :-)
    i will read everything with your example.


Tags for this Thread

Bookmarks

Posting Permissions

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