SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru htown's Avatar
    Join Date
    Mar 2005
    Posts
    676
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Footer not going to the bottom

    I have a three column page created with div's. Using the "How do I add a footer that works well, using CSS" in the book 101 Essential Tips, tricks, & Hacks" I have placed a footer.

    It all seems to work well until the ad's placed in the far left column are longer than that of any other column. Then the footer crosses over the ads. You can see the effect at www.boathousetimes.com.

    Any help is greatly appreciated.

    Cheers,
    Houston

  2. #2
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It may be due to the fact that you have the footer positioned absolutely.

    It seems that absolutely positioned elements won't clear floats.

    Since the footer is positioned absolute, with bottom:0, which is the bottom of it's containing div, I think you could place a clearer div at the bottom of the containing div to clear the floats, and the footer will still stick to the bottom of the div.

    Or simply position the footer static or relative, and place it at the bottom of the div in the markup, and give it a clear:both.

  3. #3
    SitePoint Guru htown's Avatar
    Join Date
    Mar 2005
    Posts
    676
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I will try that but I was only following exactly what the book was doing and it seems to work perfectly for them. I was hoping that I just had it in the worng position or left somethig out. I will let you know how it tirns out tomorrow.

    Thanks for your help.

    Cheers

  4. #4
    SitePoint Zealot
    Join Date
    May 2005
    Location
    Suwanee GA
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This one works in Firefox and IE6

    #footer {
    float:left;
    left:0px;
    margin:0;
    padding:0;
    width:800px; /* width of your stage */
    border-top: 1px solid #fff;
    /* border = color of stage to hide it */
    }

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

    The problem is that you have absolutely placed your side columns (divnav and divinfo) and therefore they are removed from the flow. No amount of clearing or positionng is ever going to get the footer to take notice of these columns because they are effectively removed from the flow and don't exist as far as other elements are concerned.

    You need to float the side columns and then you can clear them to bring the document flow under control.

    The footer will then work because the parent div will then expand with the side content (or the main content) and the footer will maintain its absolute position at the bottom of the parent. You will of course need to ensure that the content doesn't overwrite the footer because the footer being absolutely placed will not hold up any other content. You therefore will need to pally padding bottom to the elements above of sufficient height to allow room for the footer. Or alternatively place a static element of the same height as the footer which sites under the content and holds the spavce open for the absolute footer.

    If you look at the faq there is an alternative method of placing a footer and using 100% height explained in detail and numerous examples in the 3 col demo.

    Hope that explains it well enough


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
  •