Centering content in unknown width div

**donboe** · Jan 8, 2013 00:45

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

**Paul O'B** · Jan 8, 2013 04:46

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.

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

**donboe** · Jan 10, 2013 06:17

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

User Tag List

Thread: Centering content in unknown width div

Thread Tools

Display

Centering content in unknown width div

Bookmarks

Bookmarks

Posting Permissions