JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<header>
    <div id="top-bar">
        <div id="top-bar-content">
            header 980px wide
        </div>
    </div>
</header>

	<nav>
		<div id="nav-bar">
			<div id="nav-bar-content">
				navigation 980px wide
			</div>
		</div>
	</nav>  
	<div class="page-wrap">	
		<div id="content">	  
			Content! <br><br>
			Content! <br><br>
			Content! <br><br>
			Content! <br><br>
		</div>
	</div>
</body>

CSS

* 											{ margin: 0;}

html, body 									{ height: 100%; }
body										{background : url(images/debut_light.png) top center repeat;height: 100%;}
.page-wrap 									{ min-height: 100%; /* equal to footer height */ margin-bottom: 0px; }
.page-wrap:after 							{ content: ""; display: block; }

#top-bar									{ background: #424242; }
#top-bar-content							{ width: 980px; color: white; margin: 0 auto; }

#nav-bar                            		{ background: #0b75b2; line-height: 42px;}
#nav-bar-content							{ width: 980px; color: white; margin: 0 auto; }

#content									{ width:980px; margin: 0 auto; border-left: 2px solid red; border-right: 2px solid red; background: #fbfbfb; height: 100%;}
.site-footer, .page-wrap:after 				{ /* .push must be the same height as footer */ height: 0px;  }
.site-footer 								{ background: #272727; border-top: 4px solid #0b75b2; }

#site-footer-content						{ width: 980px; margin: 0 auto; color: yellow;}