SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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>

  3. #3
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul. That is working great. Thanks a lot.
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •