Variable Visions

Articles CSS Simple-Sticky-footer


tutorials - CSS and Web-Development.

Simple Sticky footer

Published Mon. Sep. 24, 2012


<div id="bigcontainer">
    <div id="container"></div>
</div>

<div id="stickyfooter"></div>



#bigcontainer {
    width: 100%;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    position: relative;   
}
#container {
    width: 100%;
    height: auto;
    min-height: 500px;
    margin: 0px auto 0px auto;
}
#stickyfooter {
    height: 235px;
    margin-top: -240px;
    position: relative;
    clear:both;
}


Tag(s): Sticky Footer, Negative margin