Grow your CSS skills. Land your dream job.

[Problem Solved] Sticky footer

  • # September 2, 2012 at 5:59 am

    Why the footer isin’t in the page bottom? I used clear: both; but not working :/

    HTML











    DESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINE
    DESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINE



    KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIREKAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIREKAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIREKAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIREKAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIREKAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIREKAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE
    KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIREKAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIREKAIRE KAIRE






    CSS


    body {
    background: #0c0d0e;
    color: #e2e2e2;
    font-family: 'Myriad Pro';
    text-align: center;
    font-size: 100%;
    height: 100%;
    }

    #one-page {
    min-height: 100%;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    }

    #header {
    background: #fff;
    margin: 0px auto;
    width: 1100px;
    height: 200px;
    }

    #desine {
    width: 272px;
    float: right;
    }

    #kaire {
    width: 828px;
    float: left;
    }

    #page-wrapper {
    width: 1100px;
    margin: 0 auto;
    padding-bottom:208px;
    }

    #footer {
    position: absolute;
    width: 100%;
    height: 181px;
    text-align: center;
    background: #fff;
    bottom: 0;
    left: 0;
    }
    # September 2, 2012 at 6:07 am

    @nuodas159 I changed the header footer backgrounds so you could see how it looks. Of course you can change that to whatever you’d like.

    http://jsfiddle.net/WPqr5/

    # September 2, 2012 at 8:14 am

    Am why you using reset? and the footer isin’t at the page bottom

    # September 2, 2012 at 8:32 am

    @nuodas159 the footer is the pink part at the bottom…i added some text to illustrate it a bit more clearly….http://jsfiddle.net/GdqF9/

    # September 2, 2012 at 8:36 am

    @nuodas159 Using a reset reduces inconsistencies across browsers.

    Thanks @kgscott284

    # September 2, 2012 at 8:38 am

    http://www.part.lt/img/8980d580df7162787fa3dc70ade97b2230.bmp

    The footer isin’t in the bottom of page.
    I used bottom: 0; but nothing changed.

    # September 2, 2012 at 8:39 am

    @nuodas159 Ah, you’re looking for a sticky footer. Perhaps someone else can help you with that. I’m a letterer and have limited knowledge in this area.

    # September 2, 2012 at 8:41 am

    I used the sticky footer, but with these float: left or float: right; I mean


    the footer isin’t at the bottom of page.

    # September 2, 2012 at 9:05 am

    Sry, for double post this helped me :) http://css-tricks.com/snippets/css/sticky-footer/.
    Problem solved.

    # September 2, 2012 at 10:33 am

    Don’t worry about double posting. Glad you got it worked out.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".