Centering content in unknown width div
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
