SitePoint Sponsor

User Tag List

Page 2 of 3 FirstFirst 123 LastLast
Results 26 to 50 of 70
  1. #26
    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)
    Thanks for the solution Yurikolovsky It works well

  2. #27
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,



    This has been already explained but I'll try to clarify it a bit more

    The footer should never overlap any content at all.

    If you have a small amount of content the footer will sit at the bottom of the viewport. If you then resize the window smaller the footer will still stay at the bottom of the viewport until such time as it meets any content and then it stops going up just like a normal layout would.

    If you have a large amount of content then the footer is pushed below the fold and sits under all your content.

    The footer should never overlap the content and is the reason that a "sticky footer" needs to be a fixed height so that you can account for the fact that it will overlap unless you do something to stop it

    If you are still not sure then just test out the code I gave above in IE6/7 Firefox and see how it behaves with and without content when you resize the screen etc.

    If you have a fluid width footer containing fluid content then there obviously would be a point where the text will spill out of the height when the window is squeezed smaller.

    This is why fixed footers are best for a small coyright message, logo or a couple of small links. They are not suitable for lots of content in a fluid design. In a fixed width you can obviously cater for it much better and have more content as the height won't change.

    Hope that clears it up
    That clears it up for me. Thanks a ton. *goes back to the drawing board*

    EDIT: I have submitted one entry now. Hope it works halfway.
    Last edited by kohoutek; Apr 20, 2009 at 07:03.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  3. #28
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Paul does my solution2 count if it only works in Opera?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #29
    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)
    Quote Originally Posted by RyanReese View Post
    Paul does my solution2 count if it only works in Opera?
    It counts as a solution for Opera

  5. #30
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I magically know how to get IE8 working now with that solution .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #31
    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)
    Kohoutek has a solution for IE8 but not working yet in opera Well done anyway.

  7. #32
    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)
    Kohoutek now has a solution for both IE8 and opera. Well done

  8. #33
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I prefer the social approach to the solution. Let's discuss it with Simon after work today.
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  9. #34
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    2 More solutions PMd.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  10. #35
    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)
    Quote Originally Posted by RyanReese View Post
    2 More solutions PMd.
    2 more solutions rejected

  11. #36
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    They work for Opera though.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  12. #37
    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)
    I have had a number of entries that have tried using absolute positioning for the footer and while these appears to work for ie8 (not opera 10 though) you should read the FAQ on footers for why this is not a good idea.

    If you have dynamic content such as a hide and show in the content which is enough to push the footer down then the footer gets misplaced as IE 6/7 forget where it is placed. I documented this behaviour in the FAQ on footers a long time ago and the reason I advise against using absolute positioning for this technique.

    Also note that you should test Opera 10 as that is the latest version and some footers work ion Opera 9+ but not in 10.

    However keep sending in the entries as something new may appear

  13. #38
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    ryan, edit your last comment so that the quote is empty or deleted, because now the spammer has succeeded in making sitepoint contain "HIS" content.

  14. #39
    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)
    Don't worry I've removed it

  15. #40
    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)
    I have a good answer from Kohoutec that works in IE8 and opera and is slightly different to other methods so far Well done.

  16. #41
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    tell us if any of the answers are using tricks that you haven't thought of.

  17. #42
    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)
    Quote Originally Posted by YuriKolovsky View Post
    tell us if any of the answers are using tricks that you haven't thought of.
    No there are no new tricks but there are a couple of different ways of applying the known tricks.

    However, I should point out that all the methods I have received so far fail at some stage and in one browser or another.

    Although I said it must work in IE8 and opera 10 the layouts should also work in ie6/7 as well.

    Although the ones submitted appear to work, they all fail in different scenarios. This could be that when the screen is squeezed small the whole content disappears.

    There are also issues with content having either overflow;hidden or clear:both applied to it in the content and disappears below the fold.

    No entries have covered all these issues and I can break all entries submitted so far.

    Therefore as it stands I am in the lead

  18. #43
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Your on Paul .

    PS-Trying new Windows 7 on school...it ROCKS.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  19. #44
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    that all the methods I have received so far fail at some stage and in one browser or another.
    what??
    where does mine fail?


    edit:
    oh yes, it fails a lot when the width changes, i seem to have forgotten to test the width too.

    ill just add a little logo, "works best in firefox" and be done with it xD

    edit2:
    right now im kinda loaded with work, so i don't have the will to work overtime on this, would love to see the final version that doesn't break in anything, preferably SIMPLIFIED to the bare minimum.
    Last edited by YuriKolovsky; Apr 22, 2009 at 05:39.

  20. #45
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're requiring a solution for an alpha version, Opera10alpha?

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  21. #46
    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)
    Quote Originally Posted by gary.turner View Post
    You're requiring a solution for an alpha version, Opera10alpha?

    cheers,

    gary
    Yes - good point - I forgot it was still alpha

    I also want it to work in opera 9.5 + as well then

  22. #47
    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,

    I've had some more ideas from Gary Turner and Kohoutec for some more interesting methods to solve this problem. Thanks for the entries

    I'll post my original solutions on late Friday sometime along with some of the best solutions I've received.

    Thanks to all those that have submitted so far.

  23. #48
    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)
    Solution Time

    Another week over and another quiz bites the dust. Thanks to all that have contributed, watched and taken part.

    I should point out right at the start that I don't think that "sticky footers" are always a good idea but they are commonly asked for so we do need a solution and it also makes for a good quiz.

    There are a number of ways to solve the puzzle and the eagle eyed among you spotted that my old demo from 2003 is actually working in all modern versions of opera and in IE8 also.

    The reason that this version is working when all other sticky footers fail was because of the inclusion of a minHeight hack that was used for old versions of Safari (back in 2002/3). This was simply a 0px width 100% high float that holds the page open to an initial 100% height.

    While this method fixed old Safari's lack of min-height it also had the benefit of fixing Opera's bad re-draw when the viewport was moved in a vertical direction. The same hack also fixes IE8 which was suffering from the same problem as opera.

    A couple of you managed to make this connection and used it in your answers so well spotted.

    The downside of this method is the extra div needed and the fact that you would need to contain any other content inside a parent float or any elements with clear applied would drop below the 100% high minheight float hack. However as far as Opera goes this is the only reliable solution to date that works smoothly and as expected without fault.

    There are a number of other solutions for IE8 and the simplest would be to set the outer to display:table and use height:100% which fixes the issue straight away. However the code would need to be given to ie8 only because of a long standing gecko bug that causes redraw problems unless you also include extra elements that have been set to display:table-row and display:table-cell.

    There is a another fix for IE8 and that is to use a 1% height on an inner wrapper and because the parent is a min-height the height:1% should resolve to height:auto but for some unknown reason it also fixes the ie8 problem (sounds almost like ie8 has something like "haslayout" although this has been removed in ie8 apparently).

    Another solution was to use the absolutely positioned footer method but this also suffers from a nasty bug in ie6/7 where dynamic content is used and the footer is misplaced after content is revealed or hidden. Therefore in most instances I recommend not using the absolute method unless you are sure you won't be loading dynamic data into it.


    Here is one of my solutions that should work everywhere.
    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*/
    }
    #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 */
    }
    /* #inner protects any floats in the content from clearing the minheight float */
    #inner {
        width:760px;
        overflow:hidden;/* you could use float:left if you wanted content to overflow*/
        /* background:#ffffcc; If floated instead of overflow:hidden then repeat #outer background color here */
    }
    #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;
    }
    .minheight {/* opera and IE8 fix*/
        float:left;
        width:0;
        height:100%;
        margin:0 0 -40px;/* if clear both was added to footer it would go below the fold so this matches the footer height*/
        overflow:hidden;/* just in case*/
    }
    </style>
    <!--[if lt IE 8]>
    <style type="text/css">
    * html #outer {height:100%}/* ie6 needs this*/
    .minheight{display:none}/* ie6 and 7 don't need this */
    </style>
    <![endif]-->
    </head>
    <body>
    <div class="minheight"></div>
    <div id="outer">
        <div id="inner">
            <div id="header">
                <h1>Sticky Footer</h1>
            </div>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
        </div>
    </div>
    <div id="footer">Footer</div>
    </body>
    </html>
    The downside is the extra 2 elements needed to create this effect. If you weren't worried about Opera we could lose the 2 extra divs and give ie8 (alone) display:table and be done with it.

    Winners:


    I had some more or less correct entries from a few of you but there was always a slight problem in one browser or another depending on the scenario.

    Therfore for persistence and the fact that the final version uses less divs than my original the winner this week is Maleika (Kohoutec). She managed to use the before: pseudo element to place the 100% high float and therefore save an unnecessary div in the mark up. Well done maleika

    Special mention to Gary Turner who came up with the display:table solution and managed to get it working (to a degree) in some opera versions.

    Also thanks to Yurikolovsky and Ryan who both came up with solutions although they were heavily based on my original

    Well done to all who took part.

    I'm not going to post all the solutions because I had multiple entries but I will post a few to give you the flavour.

    First solution from Maleika which may still be available here:
    http://rockatee.com/temp/sticky_polished2.html
    http://rockatee.com/temp/sticky_polished.html

    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>
    <!-- http://rockatee.com/temp/sticky_polished2.html
    http://rockatee.com/temp/sticky_polished.html
    -->
    <style type="text/css">
    * {
        margin:0;
        padding:0;
    }
    html, body {
        height:100%;
    }
    body {
        height:100%;
    }
    /* fix for Opera */
        body:before {
        content:"";
        height:100%;
        float:left;
        width:0;
    }
    #outer {
        width:760px;
        background:#ffffcc;
        margin:auto;
        min-height:100%;
        margin-top:-40px;/*footer height*/
    }
    * html #outer {
        height:100%
    }
    #outer:after { /* clear floats */
        content: "";
        clear:both;
        display:block;
    }
    #inner {
        float:left;
        height: 1%;
        width:100%;
    }
    #header {
        border-top:40px solid #fff;/* soak up negative margin*/
        background:red;
        width:760px;
    }
    #footer {
        background:red;
        width:760px;
        margin:auto;
        height:40px;/* must match negative margin and header soak up*/
    }
    </style>
    </head>
    <body>
    <div id="outer">
        <div id="inner">
            <div id="header">
                <h1>Sticky Footer</h1>
            </div>
            <div id="content">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            </div>
        </div>
    </div>
    <div id="footer">Footer</div>
    </body>
    </html>
    Maleika 2:
    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>
    <!-- http://rockatee.com/temp/sticky_polished2.html
    http://rockatee.com/temp/sticky_polished.html
    -->
    <style type="text/css">
    * {
        margin:0;
        padding:0;
    }
    html, body {
        height:100%;
    }
    body {
        background:#f0f0dd;
        font:80%/1 "Lucida Grande", "Lucida Sans Unicode", Helvetica, sans-serif;
        color:#222;
    }
    /* fix for Opera */
        body:before {
        content:"";
        height:100%;
        float:left;
        width:0;
    }
    h2 {
        line-height:2;
    }
    p {
        line-height:1.6;
    }
    #wrap {
        width:760px;
        padding:10px;
        background:#fff;
        margin:auto;
        min-height:100%;
        margin-top:-100px; /* footer height + padding */
    }
    #wrap:after { /* clear floats */
        content: "";
        clear:both;
        display:block;
    }
    * html #wrap {
        height:100%
    }
    #masthead {
        border-top:100px solid #fff;/* soak up negative margin*/
        background:#f0f0dd;
        float:left;
        width:100%;
    }
    #masthead h1 {
        color:#324650;
        padding:10px;
        line-height:2;
    }
    #content {
        height: 1%; /* needed for IE8 + 1% instead of 100% to avoid large bottom space in IE6 */
        padding:10px 0;
        float:left;
        width:100%;
    }
    #left_column {
        width:390px;
        padding-left:10px;
        float:left;
    }
    #right_column {
        width:320px;
        margin-left:20px;
        padding-right:10px;
        float:right;
    }
    #sub_column {
        width:720px;
        margin:10px 0;
        padding:10px 10px;
        background:#d6e1e7;
        float:left;
    }
    #footer {
        background:#fff;
        width:760px;
        padding:10px;
        margin:auto;
        height:60px; /* must match negative margin and header soak up*/
    }
    #footer p {
        background:#f0f0dd;
        padding:10px;
        line-height:3;
    }
    </style>
    </head>
    <body>
    <div id="outer">
        <div id="header">
            <h1>Sticky Footer</h1>
        </div>
        <div id="content">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            <p style="clear:both"></p>
            test
            </p>
        </div>
    </div>
    <div id="footer">Footer</div>
    </body>
    </html>
    Gary turner (bit shaky in opera and horizontal scrollbar appears)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xml:lang="en"
          xmlns="http://www.w3.org/1999/xhtml"
          lang="en">
    <head>
    <meta name="generator"
            content=
            "HTML Tidy for Linux (vers 7 December 2008), see www.w3.org" />
    <title></title>
    <meta http-equiv="content-type"
            content="text/html; charset=utf-8" />
    <meta name="author"
            content="Gary Turner" />
    <style type="text/css">
    /*<![CDATA[*/
    
      html, body {
        height:100%;
        margin: 0;
        padding: 0;
    }
    body {
        border: 1px solid black;  /* <<= key */
        display: table;
        vertical-align: top;
        width: 100%;
    }
    .r {
        display: table-row;
    }
    #main,  #foot {
        display: table-cell;
    }
    #foot {
        border-top: 1px solid black;
        height: 3em;
    }
    
      /*]]>*/
    </style>
    </head>
    <body>
    <div class="r">
        <div id="main">
            <h1>sticky footer demo</h1>
        </div>
    </div>
    <div class="r">
        <div id="foot">
            <p>footer stuff</p>
        </div>
    </div>
    </body>
    </html>
    Ryan Reese - this will drop the float in ie7 if page is squeezed and doesn't account for any elements that may be cleared in the content and will therefore break. It's also broken in ie6.)
    Code:
    <!doctype html>
    <html>
    <head>
    <title>Sticky Footer-RyanReese.net</title>
    <style type="text/css">
    * {
        margin:0;
        padding:0;
    }
    html, body {
        height:100%;
        position:relative;
    }
    #wrapper {
        width:760px;
        min-height:100%;
        background:green;
        margin:-3em auto 0;
    }
    * html #wrapper {
        height:100%;
        margin-top:0;
    }
    #header {
        margin:auto 0;
        background:blue;
        height:3em;
        width:760px;
        border-top:3em solid blue;
    }
    * html #header {
        margin-top:0;
    }
    #footer {
        background:red;
        height:3em;
        margin:0 auto;
        width:760px;
    }
    html>body #opera {
        float:right;
        height:100%;
        width:0;
        overflow:hidden;
    }
    </style>
    </head>
    <body>
    <div id="opera"></div>
    <div id="wrapper">
        <div id="header">
            <p>Look below and resize the viewport. It stays at the bottom!!</p>
        </div>
        <p>Text.</p>
        <p>Text.</p>
        <p>Text.</p>
        <p>Text.</p>
        <p>Text.</p>
        <p>Text.</p>
        <p>Text.</p>
        <p>Text.</p>
        <p>Text.</p>
        <p>Text.</p>
        <p>Text.</p>
        <p>Text.</p>
    </div>
    <div id="footer">
        <p>To go back to the article <a href="sticky-footer.php">click here</a>.</p>
    </div>
    </body>
    </html>

    Ryan 2
    - works in opera but not in IE8)
    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=utf-8" />
    <title>Sticky Footer at Bottom</title>
    <style type="text/css">
    * {
        margin:0;
        padding:0
    }
    html, body {
        height:100%;
        position:relative
    }
    #outer {
        width:760px;
        background:#ffffcc;
        margin:auto;
        min-height:100%;
        margin-top:-40px;/*footer height*/
    }
    * html #outer {
        height:100%
    }
    #header {
        border-top:40px solid #fff;/* soak up negative margin*/
        background:red;
    }
    #footer {
        background:red;
        width:760px;
        margin:auto;
        height:40px;/* must match negative margin and header soak up*/
    }
    html>body #special {
        width:1px;
        position:absolute;
        height:100%;
        overflow:hidden;
    }
    </style>
    </head>
    <body>
    <div id="outer">
        <div id="special"></div>
        <div id="header">
            <h1>Sticky Footer</h1>
        </div>
        <p>content</p>
            <p>content</p>
        <p>content</p>
        <p>content</p>
    
    </div>
    <div id="footer">Footer</div>
    </body>
    </html>

    Yuriklovsky
    - heavily based on my original but failed to take into account the clearing of floats in the content section. Works in opera and ie8 but the float clearing problem needs to be addressed. IE6 and 7 will drop the whole page if the window is made smaller (float clearing again)).

    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=UTF-8" />
    <title>Sticky Footer at Bottom - YuriKolovsky's try</title>
    <style type="text/css">
    *{margin:0;padding:0}
    html,body{height:100%;} 
    #outer{
        width:760px;
        background:#ffffcc;
        margin:auto;
        min-height:100%;
        margin-top:-42px;/*footer height + footer border*/
        border-right:1px solid #000;
        border-left:1px solid #000;
    }
    * html #outer{height:100%}
    #header{
        border-top:43px solid #000;/* soak up negative margin + header border */
        background:red;
        height:40px;
        border-bottom:1px solid #000;
    }
    #footer {
        background:red;
        width:760px;
        margin:auto;
        height:40px;/* must match negative margin and header soak up*/
        border:1px solid #000;
    }
    /*below is the opera/ie8 fix*/
    #minHeight{ /*this is pauls hacky idea, this is a invisible 100% height div, that forces ie8 and opera to refresh/recalculate the page on any window height change, only opera/ie8 need this*/
        float:right;/*float it, so that it does not affect anything with its position*/
        height:100%;/*can be any percentage, but works best with 100%*/
        width:0;/*not needed, but ill keep it here because im paranoid.*/
    }
    </style>
    </head>
    <body>
    <div id="minHeight"></div>
    <div id="outer">
        <div id="header">
            <h1>Sticky Footer</h1>
        </div>
        <p>soem balldly wirtten cntent, to se how teh sitckyy fotter wokrs, tihs cnontent can go on frovere, so tehre is no piont to all of tihs, teh olny inetresitng thnig here, is taht teh txet is sitll reaadble, for anoyne who redas wodrs and not lettres.
        <br />
        oh and teh sickty fooetr aslo works fnie.</p>
    </div>
    <div id="footer">Footer</div>
    </body>
    </html>
    So there you have it

    It may have seemed simple at the start but there are a lot of things to take into consideration. If you want to use a sticky footer method then you should think carefully whether you need the extra mark up and complexity in your layout.

    Thanks for listening and see you next week with another light hearted quiz

  24. #49
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Paul. And thanks so much for this quiz. You've no idea how much these quizzes help me (challenging) and, eventhough I know how much time and effort (and nerves) it takes for you to do these quizzes, I'll say that I'm really looking forward to the next one, as egotistical as that sounds.

    I'm not trying to be a bootlicker, just showing my appreciation.

    I'll read everyone's solutions now.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  25. #50
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    display:table was the second thing i did, but because it only worked in ie8, and not in opera, i dropped the idea.

    overall i had 2 solutions for ie8, and only one solution that worked in ie8 and opera (thanks to your demo paul xD)


    @kohoutek
    genius!!
    why didn't i think of putting generated content with a 100&#37; height
    this is only a "modern" browser issue

    i guess i got too mixed up in fixing old browser bugs (from previous quizzes) that i didn't even think about css3 features

    p.s. your solution is very pretty :3


    @paul
    thanks again for a excellent quiz, this one was very different for me from the other quizzes, well first because for once i tried but never did solve it to the fullest (had serious work scheduling problems) second that i just used your trick instead of sending you floods of thoughts and solutions. xD

    i really love the explanation on this one. i have never used sticky footers before so all of this is really really informative. (and better written than the previous explanations, for previous quizzes)

    and thanks for the final "all working" solution, too bad there is no best solution yet, aka yours + kohoutek's solution combined! xD

    (guess ill have to make it in my free time)


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
  •