Grow your CSS skills. Land your dream job.

2 100% Col. With a sticky footer

  • # July 26, 2010 at 8:47 pm

    Hey Guys as my subject says im trying to create a site that has a.

    Header
    Left Col – Right Col
    Sticky Footer

    Heres my html

    Code:

    Im pretty sure i have this set right?

    heres my css

    Code:
    * {
    margin: 0;
    }
    html, body {
    height: 100%;
    background-color: #3d3d3d;
    }
    .footer, .push {
    height: 110px;
    background-color: #ff7360;
    }

    margin:0; /* zero out margin */
    padding:0; /* zero out padding */
    }

    html, body {
    height:100%; /* gives layout 100% height */
    overflow:inherit; /* triggers 100% height in Opera 9.5 */
    background:#333;
    }

    #container {
    min-height:100%; /* gives layout 100% height */
    width: 970px; /* centered div must be given a width */
    margin:0 auto; /* centers #wrapper */
    background: #ce906e;
    }
    * html #container {
    height:100%; /* IE6 treats height as min-height */
    }

    #footer {
    height: 110px; /* centered div must be given a width */
    margin: -110px auto 0; /* -80px sucks it back in & auto centers it */
    background:#999;
    }

    #header {
    height: 83px;
    background-color: #2596ce;
    }

    #left {
    min-height: 100%;
    width: 299px;
    background-color: #f5f5f5;
    border-right: 1px solid #e5e5e5;
    padding-bottom: -110px;
    }

    #right {
    width: 670px;
    background-color: #fff;
    }

    I cant get my 2 col. to be 100% with out them going over the footer – any help would be appreciated.

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

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