JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div id="container">
<div id="header">
<div class="inner wrap"> <!-- Wrap -->
your header contzxcent
</div>
</div>
<div class="wrap">
<div id="navigation" class="row sixteen columns"></div>
<div id="content">
<p>Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here</p>
</div> <!-- Content -->
</div> <!-- Wrap -->
<div id="footer">
<div class="wrap">
more content
</div> <!-- Wrap -->
<div id="credits">
<a href="http://www.tophostingtoday.com/copyright/">Copyright</a>
<a href="http://www.tophostingtoday.com/disclaimer/">Disclaimer</a>
<a href="http://www.tophostingtoday.com/privacy/">Privacy</a>
<a href="http://www.tophostingtoday.com/tos/">TOS</a>
<br>
<a class="themeauthor" title="Simple WordPress Themes" href="http://www.simplethemes.com">WordPress Themes</a>
</div> <!-- Credits -->
</div> <!-- Footer -->
</div> <!-- End main container -->
</body>
CSS
html, body {
margin:0;
padding:0;
height:100%;
color:#fff;
}
#credits a {
color: #FFFFFF;
text-decoration: none;
}
div#container {
position:relative;
/* needed for footer positioning*/
margin:0 auto;
/* center, not in IE5 */
width:100%;
background:#f0f0f0;
height:auto !important;
/* real browsers */
height:100%;
/* IE6: treaded as min-height*/
min-height:100%;
/* real browsers */
}
div#header {
padding:1em;
background:#0C2044;
border-bottom: 7px solid #DD013F;
}
.inner {
width:460px;
margin:0 auto;
}
.wrap {
width:460px;
margin:0 auto;
}
div#content {
background:#EBEBEB;
padding:1em 1em 5em;
/* bottom padding for footer */
}
div#content p {
text-align:justify;
padding:0 1em;
}
div#footer {
height:auto;
position:absolute;
width:100%;
bottom:0;
/* stick to bottom */
background:#0C2044;
border-top: 7px solid #549290;
}
div#footer p {
padding:1em;
margin:0;
}
#footer #credits {
text-align:center;
border-top: 7px solid #DD013F;
}