SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Footer/ 100% Height

    Hi

    I'm sorry for bringing this up but I simply cannot do this and its driving me mad

    I've been through Paul's example in the FAQ and have managed to add a column to the left and right of my page but cannot get my footer to stay to the bottom (not sticky)

    1 - From Paul's thread I noticed there was two methods of adding a border each side, one is a left and right div, the other is sizing the 'content' div. Which is best if I would like to add images in the border. does it matter? I can get both to work but wondered if there was a benefit to one over the other.

    2- why won't my footer stay at the bottom of the page? Is it because I have relative elements in my 'content'


    http://www.togganet.co.uk/RB%20-%20s...ay-league.html

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,107
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by kimbo_king View Post
    why won't my footer stay at the bottom of the page? Is it because I have relative elements in my 'content'
    Just from a quick glance at your code, it seems you haven't followed a lot of the steps for creating a sticky footer. I recommend going through the code step by step and checking it against your own code. For example, don't set any of your elements as position: absolute. Paul's example certainly doesn't do that, and it messes up the layout.

    Everything needs to be inside the #outer div, as well, including the footer.
    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
    May 2013
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph

    I think its because I've tried to do this with my current code, guess I'll have to re-think the whole code.

    When you say sticky footer, guessing you mean one that is always visible? I actually want to avoid that and ONLY have it at the bottom of the page

    Let me go away and sort the code

    Thanks

  4. #4
    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)
    Quote Originally Posted by kimbo_king View Post
    When you say sticky footer, guessing you mean one that is always visible? I actually want to avoid that and ONLY have it at the bottom of the page
    To clarify:

    Sticky Footer
    A sticky footer is a footer that sits at the bottom of the document in the normal flow when the document is greater than the viewport height. It just behaves like a normal footer when the content is below the fold (below the viewport). However, when content is less than viewport height the sticky footer sticks to the bottom of the viewport rather than following the content up towards the header and looking a little silly on short pages.

    Fixed Footer
    A fixed positioned footer always sits at the bottom of the viewport no matter what. It does not scroll with the document and is removed from the flow and does not interact with other content. That means that you always have to add padding-bottom (equal to the height of the footer) to the last element in your page so that it isn't hidden behind the fixed footer.

  5. #5
    Non-Member
    Join Date
    Jun 2007
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why you use the following code?
    Code:
    position: absolute;
    , I think you should use relative. dont use absolute.

  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 can't have a footer under both columns when you have created 2 absolute columns as that is impossible.

    You need to float the columns and then clear the footer to make it stay below. (If you need a sticky footer then follow the faq but it doesn't look like you are implementing that anyway.)


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
  •