Question

First, check out a working example of the layout I have:
http://jsfiddle.net/EPC8c/2/

What I’m trying to do is adding a top margin to this. Since I have most of this built on 100% height, things get a little weird when trying this: http://jsfiddle.net/EPC8c/1/ (fixed link)

The fluid layout now leaves the footer being pushed down past 0 or 100% of the page. This is probably working as intended, but I’m trying to find a solution to not cause this.

Any help with this would be amazing.

HTML

<div id="container">

    <header></header>

    <div id="content"></div>

    <footer></footer>

</div>

CSS

html, body {
    background: #ff3333;
    margin:0;
    padding:0;
    height:100%;
}

#container {
    position:relative;
    background: #FFF;
    margin: 0 auto;
    width: 200px;
    min-height:100%;
}
header {
    height: 60px;
    background: #888;
}
#content {
    background: #FFF;
    min-height: 200px;
    padding-bottom: 60px; /*FOOTER HEIGHT*/
}

footer {
    position:absolute;
    bottom: 0;
    width: 200px;
    height: 60px;
    background: blue;
}

Answer 1

Here’s a solution, courtesy of this question: CSS 100% height with padding/margin

JSFiddle:
http://jsfiddle.net/EPC8c/5/

HTML:

<div id="wrapper">
    <div id="container">
        <header></header>
        <div id="content">

        </div>
        <footer></footer>
    </div>
</div>

CSS:

#wrapper {
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-top:20px;
}