I'm facing some challenges trying to figure out the most efficient and correct way to achieve this layout, similar to Stack Overflow's design. I want a header with a background color that spans the entire width of the page, while keeping the content centered within the header and main body.
Here is the code snippet I have worked on so far: http://jsfiddle.net/spadez/kYfNB/13/
HTML
<div id="container">
<div id="header">
<h1><a href="index.html">Admin</a></h1>
<ul>
<li><a href="jobs.html">Item</a></li>
<li><a href="sites.html">Item</a></li>
<li><a href="feeds.html">Item</a></li>
</ul>
</div>
<div id="content">
<h1>Add</h1>
</div>
</div>
CSS
* {
padding: 0px;
margin: 0px;
border: 0px;
font-family: Helvetica, Arial;
font-size: 13px;
text-decoration:none;
}
ul {
list-style-type: none;
}
#header {
background-color:#1ABC9C;
overflow:auto;
}
#header a {
color: white;
padding: 15px 20px;
background-color: #16AD8F;
display: block;
margin-right: 1px;
}
#header a:hover {
background-color: black;
}
#header h1, #header ul, #header ul li {
float:left;
}
#content {
background-color:#EEEEEE;
}
#container {
width: 600px;
}