Padding And Centering While Reaching The Bottom

The page I'm trying to create a page that looks like this.
(Sorry the image is so big!)
Posted Image

The code I'm using is fairly simple. The problem is creating that grey area for the actual content. I can get it to the right width, and the right height, but I can't get it to have the right padding on the sides that will keep the 800px width of the layout.

The HTML I have is:

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.0 Transitional//EN\'>
<HTML>
<HEAD>
	<TITLE>Nameless14</TITLE>
	<link rel="stylesheet" type="text/css" href="styles/main.css"/>
</HEAD>
<BODY>
<div id="wrapper">
	<div id="LoginBox"></div>
	<div id="title"></div>
	<div id="menu">
		<ul>
			<LI>Home</LI>
			<LI class="divider"></LI>
			<LI>Struggles</LI>
			<LI class="divider"></LI>
			<LI>Accomplishments</LI>
			<LI class="divider"></LI>
			<LI>Random</LI>
			<LI class="divider"></LI>
			<LI>Help</LI>
			<LI class="divider"></LI>
		</UL>
	</div>
	<div id="content">
		Stuff
	</div>
</div>
</BODY>
</HTML>

And the style sheet is as follows:

html, body {
	background: #303046;
	font-family: Verdana;
	margin: 0;
	height: 100%;
	width: 100%;
}
div#wrapper {
	min-height:100%; /* gives layout 100% height */
	min-width:100%;
	position: relative;
	overflow: hidden;
}
* html #wrapper { 
	height:100%; /* IE6 treats height as min-height */
	width:100%;
}
div#title {
	width: 800px;
	height: 150px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	background-image: url('../images/logo.png');
	background-repeat: no-repeat;
	background-position: center left;
}
#menu {
	background: #4F4F72;
	margin: 0 auto;
	color: white;
	font-weight: bold;
	width: 800px;
	height: 32px;
}
#menu ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
}
#menu li.divider {
	width: 6px;
	height: 32px;
	margin: 0;
	padding: 0;
	background-image: url('../images/splitter.png');
}
#menu li {
	float: left;
	margin: 8px;
	border: none;
	display: inline;
}
#content {
	height: 100%;
	position: relative;
	top: 182px;
	background: #E5E5E5;
	width: 800px;
	margin: 0 auto;
}

Where am I going wrong with the content id? I've been trying variations on padding and position forever. Any help would be appreciated. If you could point me to a place where this has already been explained that would be great too, because I'm not quite sure what keywords to use to search in this situation. Thanks!