Hi all! I'm working on a 100% width, 100% height layout and I'm having problems centering the menu. The situation is as follows. In the top_panel (100% width) I have two DIVS and a UL. Left the logo, after that a div holding social icons and most right the menu! For the logo and social icons divs I have set a width, but for the menu ul, I obviously haven't, since there are many different screen resolutions. Still do I want the menu UL to cover the remaining part of the top_panel. Here is what I have:
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {/* demo only */
	margin: 0;
	padding: 0;
}

html, body {
	width: 100%;
	height: 100%;
}

ul, ol, li {
	list-syle: none;
}

body {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 100%;
	color: #196e95;
	background: #FFF;
	text-align: center;
}

#wrapper {
	width: 100%;
	min-height: 100%;
	margin: 0 auto;
	margin-top:-75px;
	position:relative;
	clear:both;
	z-index: 1;	
	font-size: .8125em;
}

* html #wrapper { 
	height:100% 
}

#wrapper:after{
	content:" ";
	height:1%;
	display:block;
	clear:both;
	overflow:hidden;	
}

#top_panel {
  width: 100%;
	height: 50px; 
	margin: 0 auto; 
	z-index: 3000; 
	background: #FF0000;
	border-top: 75px #FFF solid;
}

#top_panel #logo { 
	width: 120px;
	margin: 0;
	margin-left: 15px;
	float: left;
}

#top_panel #logo a {
	width: 120px;
	height: 30px;
	display: block;
	margin: 10px 0;
	text-indent: -999em;
	background: url(../images/site/logo.png) 0 0 no-repeat;
}

#top_panel #social_icons {
	width: 200px;
	float: left;
}

#content {
	width: 320px;
	position: absolute;
	top: 120px;
	bottom: 15px;
	left: 15px;
	background: #0000FF;
}

#footer {
	width:100%;
	margin: 0 auto;
	height:75px;
	clear:both;
	position: relative;
	z-index: 100;
	background: url(../images/site/footer.png);
	font-size: .8125em;
	background: #FF0000;
}
</style>
</head>

<body>

<div id="wrapper">
	<div id="top_panel">
 		<div id="logo"></div> 
		<div id="social_icons"></div> 
    <ul id="menu">
    
    </ul> 
  </div>
	<div id="content">
  
  </div>
</div>

<div id="footer">

</div>
</body>
What would be the best way to have the menu covering the remaining part of the top_panel, preferably centered as well in that remaining part.

Thank you in advance