Grow your CSS skills. Land your dream job.

How do I center my footer?

  • # August 16, 2009 at 1:46 pm

    Hi,

    I started making a site and used the sticky footer technique here:

    http://www.cssstickyfooter.com/using-sticky-footer-code.html

    I put in all the code and everything is good besides the footer. The footer just does not want to stay centered so it is aligned with the #wrap div.

    And here is my code:

    CSS

    Code:
    * {margin:0; padding:0;}

    html, body, #wrap {height: 100%;}

    .floatleft {float: left;}
    .floatright {float: right;}
    .clear {clear: both;}

    body > #wrap
    {
    height: auto;
    min-height: 100%;
    background: cyan;
    width: 1000px;
    margin: 0px auto -100px;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    }

    #main
    {
    padding-bottom: 150px;
    height:100%;
    background: orange;
    }

    #header
    {
    width: 1000px;
    height: 100px;
    background: yellow;
    }

    #content
    {
    float:left;
    height: 200px;
    width:800px;
    background: blue;
    }

    #side
    {
    float:left;
    height: 200px;
    width:200px;
    background: purple;

    }

    /* negative value of footer height */
    #footer
    {
    width:1000px;
    position: relative;
    margin-top: -150px;
    height: 150px;
    clear:both;
    background: red;
    }

    clearfix:after {content: “.”;
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
    .clearfix {display: inline-block;}
    /* Hides from IE-mac */
    * html .clearfix { height: 1%;}
    .clearfix {display: block;}
    /* End hide from IE-mac */

    HTML

    Code:
    < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">



    This is the content DIV.
    This is he side DIV.


    Thanks,
    iasiis

    # August 16, 2009 at 2:06 pm
    Code:
    #footer {
    margin:-150px auto 0;
    }
    # August 16, 2009 at 3:23 pm
    "apostrophe" wrote:
    Code:
    #footer {
    margin:-150px auto 0;
    }

    Bless you my friend! It Works!

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

You must be logged in to reply to this topic.

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