There's 5 div sections: "wrapper", "logo", "nav", "links", & "content"
The id="wrapper" is colorless, and has a width of 850px.
The id="nav" has a tan BG color, and is about 100px tall (z-index:2;).
The id="logo" has no color, and has a .png image in it (z-index:3;).
The id="links" is floating right (inside "nav"), and has all 4 of your links in it.
The id="content" has a white BG color, and is the same width as your nav (z-index:1;).
Here's the HTML code for the body:
<body>
<div id="wrapper">
<div id="logo"><img src="logo.png" width="300" height="200" alt="logo" /></div>
<div id="nav">
<div id="links">
<a href="#">LINK 1</a> <b>·</b> <a href="#">LINK 2</a><b>·</b>
<a href="#">LINK 3</a> <b>·</b> <a href="#">LINK 4</a>
</div>
</div>
<div id="content">
STUFF
</div> <!-- END CONTENT -->
</div> <!-- END WRAPPER -->
</body>
Here's the CSS code:
body{
background-color:#000;
text-align:center;
}
a:link{color:#FFF; text-decoration:none;}
a:visited{color:#FFF; text-decoration:none;}
a:active{color:#FFF; text-decoration:none;}
a:hover{color:#FFF; text-decoration:none;}
#wrapper{
width:850px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
}
#nav{
position:relative;
top:-175px;
z-index:2;
background-color: #f9dd7d;
padding-top: 40px;
padding-bottom:0px;
padding-right:100px;
padding-left:10px;
width: 600px;
height:60px;
overflow:hidden;
margin-top: 0px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
font-size:20px;
font-family:Arial, Helvetica, sans-serif;
}
#links{
float:right;
color:#4dafdd;
}
#logo{
position:relative;
top:0px;
left:-300px;
z-index:3;
width:305px;
margin-left:auto;
margin-right: auto;
}
#content{
position:relative;
z-index:1;
top:-200px;
background-color:#FFF;
text-align:left;
padding-top: 110px;
padding-bottom:60px;
padding-right:100px;
padding-left:10px;
width: 600px;
margin-top:0px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
font-size:15px;
font-family:Arial, Helvetica, sans-serif;
}