JSFiddle - React, Tailwind, and code Playground
HTML
<div id="main">
<div id="header">
<h1><b>Website Header</b></h1>
</div>
<div id="nav">
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">Forums</a>
</li>
<li><a href="#">Members</a>
</li>
<li><a href="#">Contact Us</a>
</li>
</ul>
</div>
<div id="submain">
<div id="chat">
<h3>CHAT BOX</h3>
</div>
<div id="content">
<h1>Content goes here</h1>
</div>
<div id="subright">
<div id="members">
<h4>Member Area</h4>
</div>
<div id="recent">
<h4>Recent Activity</h4>
</div>
</div>
</div>
<div id="footer"> <b>Some footer, 2013</b>
</div>
</div>
CSS
html, body {
height: 100%;
width: 100%;
}
body {
margin: 0;
padding: 0;
border: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 15px;
background: #66FF66;
}
img {
border: none;
}
a {
color: #8D0D19;
}
a:hover {
color: #1A446C;
}
#main {
width:100%;
overflow:hidden;
float:left;
background:red;
}
#header {
height: 150px;
margin: 10px;
padding: 5px;
text-align: left;
background: #1A446C;
color: #D4E6F4;
}
#header h1 {
padding: 1em;
margin: 0;
}
#nav {
text-align:center;
/*word-spacing:240px;*/
float: center;
height: 100%;
min-width: 1200px;
margin: 0 auto;
padding: 1px 0em;
color: #D4E6F4;
background: none;
}
#nav a {
color: #D4E6F4;
text-decoration: none;
}
#nav li a:hover {
background: #383;
}
#nav ul li {
list-style-type: none;
display: inline;
}