JSFiddle - React, Tailwind, and code Playground

HTML

<div id="top"></div>
<div id="header-placeholder-placeholder">
    <div id="header-placeholder">
        <div id="header">
            <div class="inner">a</div>
        </div>
    </div>
</div>
<div id="container">
    <div id="content"></div>
    <div id="footer"></div>
</div>

CSS

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    height: 100%;
    border: none; /* IE border fix */
}

#top {
    position: absolute;
    height: 170px;
    background: #baa590;
    left: 0;
    top: 0;
    width: 100%;
}

#container {
    position:relative; /* required for footer positioning*/
    width: 970px;
    margin: 0 auto;
    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/
    min-height:100%; /* real browsers */
    background: red;
}

#header-placeholder-placeholder {
    _margin-right: 970px;
    height: 200px;
}

#header-placeholder {
    position: relative;
    min-width: 970px;
    width: auto;
    _margin-right: -970px;
    height: 200px;
    overflow: hidden;
}

#header {
    position: absolute;
    left: 50%;
    color: #fff;
    text-align: center;
    margin-left: -512px;
    width: 1022px;
    height: 200px;
    background: #390419;
}

#header .inner {
    height: 200px;
    width: 950px;
    margin: 0 auto;
    background: blue;
}