CSS - Sticky footer [duplicate]

Answer 1

You actually are close to getting the concept from http://www.cssstickyfooter.com/html-code.html working, it just needs a html, body { height: 100%; } to become "sticky".

http://jsfiddle.net/2jn3J/22/

If you want to do it right completely and get the space between the content and the footer, you're gonna have to add another div with a min-height: 100%; and remove the min-height: 100%; from .container.

http://jsfiddle.net/2jn3J/28/

CSS:

html, body { height: 100%; }
.wrap { min-height: 100%; }
.footer {
    width:798px;
    border-top: 2px solid #2E181A;
    clear: both;
    padding: 5px 0 0 0;
    background-color: inherit;
    text-align: center;
    bottom:0;
    background-color: #E6D9BD;
    position:relative;
    height: 30px;
    margin: -37px auto 0 auto;
    z-index:30;
}

.container {
    width: 788px;
    margin: 0px auto 0px auto;
    padding: 0px 0px 30px 0px;
    border:5px solid #2E181A;
    background-color: #E6D9BD;
    position:relative;
    content: " "; /* 1 */
    display: table; /* 2 */
    overflow: auto;
}

.contentleft {
    background-color: inherit;
    margin:5px 10px 10px 10px;
    padding:10px 5px 30px 5px;
    float:left;
    overflow: auto;
    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;
}

HTML:

Content in the left
Content in the right




Sticky footer