SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

    Sticky footer revisited.

    I used to use below to fix opera and ie8...

    html:before, #wrap:before { /* Opera and IE8 "redraw" bug fix */
    content:"";
    float:left;
    height:100%;
    margin-top:-999em;
    }

    But it was brought to my attention that my demo no longer worked (wouldnt even display the page) in the newest chrome. I checked and html:before was the culprit. Changing it to body:before fixed chrome. But further testing showed that the newest Opera no longer even needed it. So now I just have the below code in my demo to fix opera and ie8 redraw bug...

    #wrap:before { /* Opera and IE8 "redraw" bug fix */
    content:"";
    float:left;
    height:100%;
    margin-top:-999em;
    }

    Width:0 seems to work well too instead of margin-top:-999em. Although I seem to remember a reason for that.

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>{ visibility: inherit; } Sticky Footer!</title>
    <style type="text/css">
    * {
    margin:0;
    padding:0; 
    }
    html, body {
    height:100%; 
    background:#999;
    }
    #wrap {
    min-height:100%; 
    width:1000px; 
    margin:0 auto;
    background:#ddd;
    border:solid;
    border-width:0 1px;
    }
    #wrap:before { /* Opera and IE8 "redraw" bug fix */
    content:"";
    float:left;
    height:100%;
    margin-top:-999em;
    }
    * html #wrap { /* IE6 workaround */
    height:100%; 
    }
    h1 {
    text-align:center;
    padding:100px 0 200px; /* padding-bottom equals height of #foot */
    }
    #foot {
    height:200px;
    width:1000px;
    margin:-200px auto 0; /* negative margin-top equals height of #foot */
    background:url(images/sticky-foot.jpg);
    }
    </style> 
    </head>
    <body>
    
    <div id="wrap">
    <h1>STICKY FOOT!</h1>
    </div>
    <div id="foot"></div>
    
    </body>
    </html>

  3. #3
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    What's this "sticky footer" supposed to do? Can you not just give something a fixed position and set it bottom 0? Or does it do something else?

  4. #4
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,097
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by samanime View Post
    What's this "sticky footer" supposed to do? Can you not just give something a fixed position and set it bottom 0? Or does it do something else?
    Something else. It puts a footer on the page that will "stick" (hence the name) to the bottom of the viewport, but if there is a lot of content, it will shift down.

    See http://www.sitepoint.com/forums/1239966-post3.html

    Example http://www.pmob.co.uk/temp/sticky-fo...w-no-table.htm
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

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

    We never used html:before in the demo and always used body:before so chrome would not be an issue with my original example.

    Opera 11 does seem to have fixed the redraw issue though and needs a fix.

    You can't put the 100% high float inside #wrap because then it may drag other floated content upwards with it. You can't remove the negative margin because then any content in the wrapper that is set to clear:both will disappear under the fold. That's what the large negative margin is for so that the float has no effect on content in the page.

    All you needed to do was set the wrapper to clear:both in the original method of ours.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Sticky Footer at Bottom</title>
    <style type="text/css">
    * {/* for demo only*/
        margin:0;
        padding:0
    }
    html, body {
        height:100%;/* needed to base 100% height on something known*/
        text-align:center;
    }
    #outer {
        width:760px;
        background:#ffffcc;
        margin:auto;
        min-height:100%;
        margin-top:-40px;/*footer height - this drags the outer 40px up through the top of the monitor */
        text-align:left;
        clear:both;
    }
    * html #outer {
        height:100%
    }
    #header {
        background:red;
        border-top:40px solid #fff; /* soak up negative margin and allows header to start at top of page*/
    }
    #footer {/* footer now sits at bottom of window*/
        background:red;
        width:760px;
        margin:auto;
        height:40px;/* must match negative margin of #outer */
        clear:both;
    }
    /*Opera Fix*/
    body:before {/* thanks to Maleika (Kohoutec)*/
        content:"";
        height:100%;
        float:left;
        width:0;
        margin-top:-32767px;/* thank you Erik J - negate effect of float*/
    }
    h1, h2, p {
        padding:0 10px;
    }
    #outer:after {/* thank you Erik J - instead of using display table for ie8*/
        clear:both;
        display:block;
        height:1%;
        content:" ";
    }
    </style>
    </head>
    <body>
    <div id="outer">
        <div id="header">
            <h1>Sticky Footer</h1>
        </div>
        <h2>Ultimate Sticky footer that works in ie5/6/7/8, Opera 9 and 10, Firefox 2+, Chrome, Safari 3+ (and <a href="http://www.browsercam.com/public.aspx?proj_id=490004">probably every other modern browser</a>)</h2>
        <p>test</p>
        <p style="clear:both">Element with clear:both added just for testing</p>
        <p>test</p>
        <p>test</p>
    </div>
    <div id="footer">
        <p>Footer</p>
    </div>
    </body>
    </html>
    Sticky Footer at Bottom

    Of course the opera float could be removed completely if only opera 11 support is required.

  6. #6
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    Ah, I see. Very clever.

  7. #7
    SitePoint Guru rageh's Avatar
    Join Date
    Apr 2006
    Location
    London, Formerly Somalia
    Posts
    612
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Paul for the clever solution. Just what I needed.
    ------------------

  8. #8
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great solution Paul, thank you.

    Just one thing: what if i want to have both header and footer background on the full width? How can i achieve that?

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

    If the header is also a fixed height you can do it this way (that's assuming you wanted the content still ficed width and centered otherwise if the whole layout was to be 100% wide then just use the normal method but all at 100% width etc).

    If the header isn't a fixed height then it can be done but gets a lot more complicated.

  10. #10
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    So I tested my humble demo by puting floats in the wrap and I couldn't produce any problem. Am I missing something? Thanks.

    "You can't put the 100% high float inside #wrap because then it may drag other floated content upwards with it."

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Hi Paul,

    So I tested my humble demo by puting floats in the wrap and I couldn't produce any problem. Am I missing something? Thanks.

    "You can't put the 100% high float inside #wrap because then it may drag other floated content upwards with it."
    IIRC I think the issue I saw was that if the wrap had been floated (as some people do to contain floats) and then everything seemed to get pulled upwards.

    Apart from that it seemed to work ok . However you can't remove the bottom negative margin or any floats that are cleared will jump down 100%.
    I would also use the pixel mount that we used as that is the limit. If your 999em ever equates to higher than the limit (unlikely I know) then opera breaks once again.

    Thanks for bringing the new opera 11 behaviour to my attention but its a shame that they fix one bug and then break something else though I''ve more or less given up on opera as it has too many odd unfixable bugs and changes behaviour on every iteration.

  12. #12
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Ok cool. Thanks! I believe Opera fixed that negative margin limit a couple versions ago. At least they did when I originally tested all that a while back.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Ok cool. Thanks! I believe Opera fixed that negative margin limit a couple versions ago. At least they did when I originally tested all that a while back.
    Ah ok thanks, I haven't tested that lately

  14. #14
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    If the header is also a fixed height you can do it this way (that's assuming you wanted the content still ficed width and centered otherwise if the whole layout was to be 100% wide then just use the normal method but all at 100% width etc).

    If the header isn't a fixed height then it can be done but gets a lot more complicated.
    That solution is very similar to the one on this website: New CSS Sticky Footer - 2010 - HTML for Bottom of Page Footer

    If you try to see that website with Chrome (my version is 10.0.648.151) and adjust the width so the horizontal scroll appears, you'll see the same error i have on my layout. The footer background disappears.

    EDIT: I've noticed know that your example have the same problem.

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by XaviJr View Post
    That solution is very similar to the one on this website: New CSS Sticky Footer - 2010 - HTML for Bottom of Page Footer
    Yes and if you look at the acknowledgement on the home page Steve mentions me by name . ( My version is the oldest on the internet and pre dates (2003) all other versions (and is also now the most modern as well).)

    If you try to see that website with Chrome (my version is 10.0.648.151) and adjust the width so the horizontal scroll appears, you'll see the same error i have on my layout. The footer background disappears.

    EDIT: I've noticed know that your example have the same problem.
    That's nothing to do with the sticky footer but just that the footer (and header) need a min-width to match the width of the centred layout.

    e.g.

    Code:
    #header,#footer{min-width:900px}
    I've updated my example to show it works.

    It would happen to any 100% wide element that is aligned with fixed content. Just add a min-width equal to the widest element on the page.

  16. #16
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, it worked, thank you!

    Can this be applied on your first example (http://www.pmob.co.uk/temp/sticky-fo...no-table.htm)? I'm having some trouble adjusting the header with that method.

    EDIT: Nevermind, i did it. Once again, thank you.


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
  •