SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Apr 2009
    Location
    New York, NY
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Footer DIV Overlapping Content

    Hi,

    I've been working on a new website design and making the footer display at the far bottom of the page.

    This functionality is working fine in FF but not in IE7, Safari, and Chrome so I know my CSS is wrong. What happens is that the footer div overlaps the bottom text when there isn't enough room for both. If you can't see it at first try making your browser smaller.

    How can I rework the CSS so this doesn't happen and the footer is always below any content and at the bottom of the page if the content doesn't fill up the page?

    The page can be seen at tinyurl.com/cdfyjl

    or preview.tinyurl.com/cdfyjl if you want to preview the link first.

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Rather than the negative bottom margin on #topHalf, use a negative top margin on #footer instead.

  3. #3
    SitePoint Member
    Join Date
    Apr 2009
    Location
    New York, NY
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking

    It turned out that the clear:both wasn't working properly because there was another div between the footer and my floating div. Moved clear both to this in between div and now it works properly. Ill try to post my css in the morning.

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

    You have some logic errors in your code.

    First of all the 100% min-height routines should be applied to the first element on the page which in your case is the form that surrounds the page. You have set the form to 100% height and therefore you run the danger of the browsers ignoring any content that is greater that that 100% height.

    What you are doing with your code is allowing the inner content to burst out of the form container and although this appears to work it is not the safest way to do this. Besides there is no need to this if you simply use the form container as the min-height:100% element instead.

    The second problem is the routine you are using for 100% heigh breaks in IE7 and you shouldn't use the !important hack method (as I state at least once a week) because it breaks badly in IE7. IE7 gets confused and leaves the footer sticking in the wrong place when the window is resized.

    Instead you should use my version which just gives ie6 the height:100% in its own rule and is much cleaner and actually less code.

    Code:
    html,body{height:100%}
    .outer{min-height:100%}
    * html .outer{height:100%}
    You can see the full footer example here which doesn't need a push div either as the soak up is carried out in the header elements instead.

    http://www.pmob.co.uk/temp/sticky-footer.htm

    Refer to the faq on putting a foter at the bottom for more info on the IE7 problem and other methods.

    Also note that you can't do this <div /> as div is not a designated self-closing tag - should be <div></div>.

    Hope that helps

  5. #5
    SitePoint Member
    Join Date
    Apr 2009
    Location
    New York, NY
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Amazing, works perfectly and is much easier than the way I was trying to accomplish it. This way also works much better in IE7.

    Thanks so much Paul, could saved me a nights work if I had known how to do this earlier but it has certainly saved me future headaches.


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
  •