SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Footer Sticks To Bottom Of Viewport And I Don't Want It To

    Here is the page:

    http://www.tocdocs.com/index.091010.html

    When I view the footer at first it appears directly under the main div area that is Black. But when I resize the browser, the footer seems to stick to the bottom of the viewport and I am wanting it to stay beneath the main div area that is black. Can someone take a look and offer a suggestion?

    Todd
    Todd Temple > T2 Design

  2. #2
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,068
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just saw the site in IE8, FF and Opera but in all three case the footer remained under the main div area when I resized the window. I which browser did this problem occur?

  3. #3
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by donboe View Post
    Just saw the site in IE8, FF and Opera but in all three case the footer remained under the main div area when I resized the window. I which browser did this problem occur?
    Safari. It happens when you resize the browser...
    Todd Temple > T2 Design

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

    You have set your wrapper to min-height:100% and then placed your footer after it. Where do you think that will place the footer

    Remove the min-height:100% from your wrapper and the footer should drop back into the flow.

  5. #5
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    You have set your wrapper to min-height:100% and then placed your footer after it. Where do you think that will place the footer

    Remove the min-height:100% from your wrapper and the footer should drop back into the flow.
    Man... you are the best! I tried it and it worked. Of course! With this fix I am now wondering if the min-height: 100% would have worked if I had enclosed the footer div within the wrapper div. Would it?

    Todd
    Todd Temple > T2 Design

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    If you want the wrapper to always be a minimum of 100% then yes putting the footer inside the wrapper would have worked also. However,I didn't really see a need for you to have the min-height though as you have no full length backgrounds unlike your other thread where you wanted an image to go all the way down.

  7. #7
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    If you want the wrapper to always be a minimum of 100% then yes putting the footer inside the wrapper would have worked also. However,I didn't really see a need for you to have the min-height though as you have no full length backgrounds unlike your other thread where you wanted an image to go all the way down.
    I know. Sometimes I start to add fixes that have worked in the past (as in the case from the other thread) and see if they would work in different situations. But, obviously, I am still learning and trying to grasp these solutions so that I do not have to ask the same question ever again.

    I really appreciate the advice and support from the SitePoint forums and the friendships that are a direct result.
    Todd Temple > T2 Design


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
  •