SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Div is getting cut off on long pages

    I am having trouble figuring out why the dark gray div at the bottom of the page is getting cut off on long pages.

    Long page: http://bit.ly/gLgj2Z

    It appears just fine on short pages (albeit too high on the page).

    Short page: http://bit.ly/gzUAUw

    Is the sticky footer (the part in white at the very bottom which holds links and copyright info) causing the problem? I tried adding padding and borders in case this is a case of collapsing margins, but that didn't work.

    I'm stuck.

    EDIT: Okay, I just added a 30px bottom margin to #home-bottom-widgets and it seems to have worked. But I don't know if this is the correct solution. What will happen on other pages??

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I just added a 30px bottom margin to #home-bottom-widgets and it seems to have worked. But I don't know if this is the correct solution. What will happen on other pages??
    Hi Susan,

    That should work fine. I think you see what's going on here, you always need to soak up (account for) the footer height somewhere.

    The same problem happens on short pages too when you reduce the viewport height.

    What you did there was similar to this method which uses a bottom padding on an inner div that is the same height as the footer. That method is used when you pull the footer up with a negative top margin (as you have done).

    Negative Margin Footer Pull Method

    Another way is to pull the min-height:100% wrapping div through the top of the viewport with the negative top margin. In doing that the footer is at the bottom of the page but then the top content is getting clipped. To fix that you just add a top border to the first element in the wrapping div.

    Top Border Soak Up Method

    That is the method Paul has always preferred and I have come to appreciate too as it does not require the extra inner div. It resolves the problem at the top of the page and everything else will fall into place on it's own.

  3. #3
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the info, Ray. That helps.


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
  •