SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot capnhud's Avatar
    Join Date
    Nov 2005
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can stop footer from scrolling when content set to 100%

    I am trying to make it so that the contentwrapper will adjust according to the content that is inside it while at the same time make the footer stay below. So far I have been able to position the footer using abolute lenghths, but that creates a page that can be to big if there is little content. How do I make contentwrapper and footer work in harmony on this page
    Last edited by capnhud; May 22, 2009 at 19:47.
    I know I am in my own little world. But its OK "They Know Me HERE"

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Page not found. Do you mean like a sticky footer? Pmob.co.uk has a great list of layouts which may meet your needs .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Zealot capnhud's Avatar
    Join Date
    Nov 2005
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It seems that each one that I try so far just seems to make things worse. As far a a ok page I was fine until I started thinking about what if the content was less that what is there now and the moment I changed content to anything other than 100% ie 850px all hell broke loose. In opera I see one in firefox I see another and I just became frustrating.
    I know I am in my own little world. But its OK "They Know Me HERE"

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    You definitely want to check out the sticky footer. What it does is use a footer who is OUTSIDE the container of the rest of the page. This container is also set to min-height: 100% (height: 100% for IE6) so that it's always at least 100% tall but can grow if content grows. You just can't get that in a pure 100% high page unless you set overflow to auto for extra scrollbars (on that element, container, not the page like normal).

    The footer would always bee offscreen then, since the container above it is always at least 100% tall. So you pull it up over container's bottom with a negative top margin. Since this means content inside container might get covered over, some inner element of container needs to have bottom padding at least as much as the footer is tall. (you can't add the padding to the container because you can't add to 100%)

    Also make the footer position: relative for stability of links and other clicky things inside, and you're good to go.

    Do look at Paul's examples, though. I've seen other with this stupid "push" div inside and that's just nasty, stinks as bad as a clearing div. You don't need it.


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
  •