Question

Given a 2 pane 100% height based faux column layout, I am trying to have a sticky footer in the right column that does not float over the column’s content if the browser viewport is too small to display all the content.

My current problem is that the footer will float over the content if the browser viewport is to small.

This is what I am after:

With the code below though the footer (3) will move over the content (2).

Explanation:

1. Sidebar – this will have to extend to 100% height of the browser viewport or the combined height of 2+3 (whichever is greater)
2. Content – Varying amounts of content.
3. Footer – fixed height footer. This is either at the bottom of the browser window or below the content from no.2 whichever is greater.

Current html:

<div id="wrapper">
    <div id="sidebar"></div>
    <div id="content">
        <div id="footer"></footer>
    </div>
</div>

Current css:

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
#wrapper {
    margin: 0 auto;
    width: 1000px;
    height: 100%;
}
#sidebar {
    width: 400px;
    height: 100%;
    float: left;
}
#content {
    width: 600px;
    float: left;
}
#footer {
    position: absolute;
    bottom: 0;
    height:200px;
}

Any help or pointers to get the footer to stay below the content no matter what would be much appreciated.

Answer 1

You need something like this? http://jsfiddle.net/L6BLa/3/