Centering content in unknown width div

HTML & CSS
1

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:


<!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

2

Hi,

It’s a little difficult to give a full answer as it does depend on what you want to happen when the menu wraps and what other behaviours are going on in that section.

If you set the menu to overflow:hidden it will naturally fill up the rest of the header space. If you want the nav centred within that section then inline-block on the list items should do that.

e.g.


<!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:yellow url(../images/site/logo.png) 0 0 no-repeat;
}
#top_panel #social_icons {
	width: 200px;
	float: left;
	background:green
}
#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;
}
#menu {
	margin:0;
	padding:0;
	liest-style:none;
	overflow:hidden;
	text-align:center;
	zoom:1.0;/* ie6/7 hack  */
}
#menu li, #menu a {
	display:inline-block;
	vertical-align:middle;
 *display:inline;/* ie6/7 hack */
	zoom:1.0;/* ie6/7 hack  */
}
#menu a { margin: 0 1em }
</style>
</head>

<body>
<div id="wrapper">
		<div id="top_panel">
				<div id="logo"><a href="#">Logo</a></div>
				<div id="social_icons">Social</div>
				<ul id="menu">
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
				</ul>
		</div>
		<div id="content"> </div>
</div>
<div id="footer"> </div>
</body>
3

Hi Paul. That is working great. Thanks a lot.