CSS - Sticky footer [duplicate]

Answer 1

I'm not sure if this is what you wanted? http://jsfiddle.net/2jn3J/19/

I added a container for the footer div with a height of 50px which is fixed to the bottom. The footer div is now absolutely positioned at the bottom with the div with a height of 30px, thus leaving a 20px gap.

.footer-container {
    background-color:white;
    height:50px;
    width:100%;
    position:fixed;
    bottom:0;
    z-index:30;
    clear: both;
}

.footer {
    border-top: 2px solid #2E181A;
    background-color: inherit;
    text-align: center;
    background-color: #E6D9BD;
    height:30px;
    position:absolute;
    bottom:0;
    width:100%;
}

.container
{
    width: 100%;
    margin: 0px auto 0px auto;
    padding: 0px 0px 30px 0px;
    background-color: #E6D9BD;
    height:2000px;
    position:relative;
        content: " "; /* 1 */
    display: table; /* 2 */
}
.contentleft
{

    background-color: inherit;
    margin:5px 10px 10px 10px;
    padding:10px 5px 30px 5px;
    float:left;
    overflow: hidden;
    width: 300px;
        display:block;
}
.contentright
{

    background-color: inherit;
    margin:5px 0px 10px 10px;
    border:0px solid #2E181A;
    padding:10px 5px 30px 5px;
    float:left;
    overflow: hidden;
    width: 420px;
    display:block;
}