JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div id="wrapper">
<div id="header">
<table width="100%" height="auto" border="0">
<tr>
<td><h1 id="logo"><a href="#">WEBSITE</a></h1></td>
<td><div id="navigation">
<ul>
<a href="#"><li>HOME</li></a>
<a href="#"><li>FORUM</li></a>
<a href="#"><li>NEWS</li></a>
<a href="#"><li>INFORMATION</li></a>
<a href="#"><li>GALLERY</li></a>
<a href="#"><li>STAFF APPLICATIONS</li></a>
<a href="#"><li>CONTACT US</li></a>
</ul>
</div></td></tr></table>
</div>
<div id="content">
<div id="announcement">
<center>
<p><marquee>Latest News: WEBSITE IS STILL UNDER MAINTENANCE!</marquee></p>
</center>
</div>
<div id="slider">
<center>
<h1>IMAGE SLIDER COMING SOON</h1>
</center>
</div>
<div id="featured">
<table width="100%" height="100%" border="0">
<center>
<tr>
<!-- Column 1 -->
<td align="center" valign="top"><div id="thumbnail">
<img src="images/logo.png" alt="" title="1" width="100px" height="100px" />
<h3>Our Community, Your Community</h3>
<p>When you join our community, you are part of our community. We like outsiders that join us, because it means that we are getting <b>BIGGER</b>, and bigger is better! We are growing, gaining more members, more customers and more jobs are available! If you have not already joined us, then join us now!</p>
<a href="#">Register</a>
</div></td>
<!-- Column 2 -->
...
CSS
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
padding:10px;
background:white;
}
#content {
padding:10px;
padding-bottom:80px; /* Height of the footer element */
}
#footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
background:red;
color:white;
}