#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    4
    Rep Power
    0

    Centered CSS Container Malfunction


    I've been out of the professional design loop for about 5 years but took on what should have been a straightforward conversion project, converting an existing site to a CMS. Sadly, the original designer/template used a table layout which caused all sort of errors when converting to a CMS templating system.

    I have the site design converted to CSS now except for one issue, which is the container div does not center the whole page and I'm baffled as to why not...because it appears that it *should* be centered.

    So far, I've only tested on Safari & Google Chrome on MacOSX (I'll be testing elsewhere soon.)

    I'm aware there may be other issues in the CSS, since I had to monkey with the widths in order to get everything to align correctly (original table layout width was 1150).

    Thanks for any insight you can offer!

    Diana



    Code:
    @charset "UTF-8";
    body {
    
    	text-align: center; 
    	background-color:	#003366;
    		margin: 			0px;
    		padding: 			0px;
    		font-family:		Verdana,Arial,Helvetica,sans-serif;
    		font-color:			#ffffff;
    		font-size:			12px;
    				
    }
    #container {
    	width: 1150;  
    	background: #003366; 
    	border: 1px solid #000000;
    	text-align: center; 
    	padding: 0px;
    	margin-top: 0;
    	margin-bottom: 0;
    
    }
    #header {
    	float: left;
    	vertical-align: middle;
    	max-width: 1150px;
    	max-height: 107px;
    	height: 107px;
    	background-color: #FFFFFF;
    	margin: 0px;
    	padding: 0px;
    	width: 1051px;
    	position: relative;
    }
    #subheader {
    	width: 1052px;
    	float: left;
    	margin: 0px;
    	padding: 0px;
    }
    #learnmore {
    	float: left;
    	width: 1150px;
    	margin: 0px;
    	padding: 0px;
    }
    #learn1 {
    	float: left;
    	width: 353px;
    }
    #learn2 {
    	float: left;
    	width: 349px;
    }
    #learn3 {
    	float: left;
    	width: 348px;
    }
    #slogan {
    	float: left;
    	vertical-align: middle;
    	padding-top: 34px;
    	padding-left: 57px;
    	background-color: #FFFFFF;
    	padding-right: 0px;
    	}
    #logo {
    	float: left;
    	width:391;
    	background-color: #FFFFFF
    	}
    
    
     #mainContent {
    	float: left;
    	width: 1032px;
    	padding-top: 0;
    	padding-right: 0px;
    	padding-bottom: 0;
    	padding-left: 20px;
    	background-color: #ebebeb;
    	background-attachment: scroll;
    	background-image: url(graphics/homeGlobe.jpg);
    	background-repeat: no-repeat;
    	background-position: right;
    }
    #hometext {
    	float: left;
    	width: 570px;
    	height: 318px;
    	overflow: scroll;
    	text-align: justify;
    }
    #top-menu {
    	float: left;
    	padding-left: 151px;
    	background-color: #FFFFFF;
    	width: 900px;
    }
    #rtimg {
    	float: left;
    	width: 395px;
    	padding-left: 48px;
    	padding-right: 0px;
    }
     #footer {
    	width: 1052px;
    	padding-top: 0;
    	padding-right: 0px;
    	padding-bottom: 0;
    	padding-left: 0px;
    	background-color: #1D3368;
    }
    #logosm {
    	background-color: #003366;
    	float: left;
    	/*height: 43px;*/
    	width: 189px;
    }
    #address {
    	background-color: #1D3368;
    	/*height: 43px;*/
    	padding-top: 15px;
    	color: #FFFFFF;
    	font-size: small;
    	font-weight:bold;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	text-align: center;
    	float: left;
    	padding-left: 75px;
    	width: 788px;
    	padding-bottom: 13px;
    }
    a {
    	color: #666666;
    }
    #center {
    	text-align: center;
    	margin-left: 5%;
    	margin-right: 10%;
    }
    
    .group125AddressSpecial {
    color: #0066FF;
    font-size: small;
    font-weight:bold;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    text-align:center;
    }
    
    #copyright {
    	color: #666666;
    	font-size: xx-small;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	text-align:right;
    	text-decoration:none;
    	vertical-align: middle;
    	float: left;
    	height: 36px;
    	background-color:#FFFFFF;
    	width: 213px;
    }
    #menu-copyrightHolder {
    	background-color: #FFFFFF;
    	margin: 0px;
    	float: left;
    	height: 36px;
    	width: 1052px;
    	text-align:center;
    	padding-top: 15px;
    	padding-right: 0px;
    	padding-bottom: 0px;
    	padding-left: 0px;
    }
    
    #bottom-menu {
    	color: #666666;
    	background-color:#ffffff;
    	font-size: small;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	text-align:center;
    	text-decoration:none;
    	float: left;
    	height: 36px;
    	width: 839px;
    	margin: 0px;
    	padding: 0px;
    }
    HTML

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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>
    <link href="oneColFixCtrHdr.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    
    	<div id="container">
    	<div id="top-menu">
        <img src="graphics/btnHomeDown.jpg" width="64" height="32" alt="Home">
        <img src="graphics/btnAbout.jpg" name="Image4" width="85" height="32" border="0" alt="About Founders">
        <img src="graphics/btnServices.jpg" name="Image5" width="81" height="32" border="0" alt="About Our Services">
        <img src="graphics/btnIndustries.jpg" name="Image6" width="165" height="32" border="0" alt="About the Industries We Serve">
        <img src="graphics/btnCapital.jpg" name="Image7" width="146" height="32" border="0" alt=" Capital">
        <img src="graphics/btnNews.jpg" name="Image8" width="124" height="32" border="0" alt="New &amp; Events">
        <img src="graphics/btnContact.jpg" name="Image9" width="115" height="32" border="0" alt="Contact Us">    
        </div>
        
      <div id="header">
      	<div id="logo"><img src="graphics/nav1.jpg" width="391" height="107" alt="Trademark"></div>
         <div id="slogan"><img src="graphics/navThinking.jpg" alt="Thinking like investors, operating like management." width="603" height="39"/></div>
       </div>
       
       <div id="subheader"><img src="graphics/homeArt.jpg" width="1050" height="204"  alt="We've helped companies achieve success from both sides of the desk.">
       		<div id="learnmore">
            	<div id="learn1"><img src="graphics/homeSub1.jpg" width="353" height="132"  alt="We can parachute in quickly, help stabilize even the most volatile situation and provide high value results."><br />
            	  <a href="services.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image19','','graphics/homeSub1c.jpg',1)"><img src="graphics/homeSub1b.jpg" name="Image19" width="353" height="54" border="0"  alt="Learn More About Our Services"></a></div>
                <div id="learn2"><img src="graphics/homeSub2.jpg" width="349" height="132" alt="Need to improve operating results? Turn to for its consulting expertise."><br /><a href="industries.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image20','','graphics/homeSub2c.jpg',1)"><img src="graphics/homeSub2b.jpg" name="Image20" width="349" height="54" border="0"  alt="Learn More About the Industries We Work With"></a></div>
                <div id="learn3"><img src="graphics/homeSub3.jpg" width="348" height="132" alt="Sometimes the best opportunity is through a strategic investment by  Capital."><br /><a href="capital.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image21','','graphics/homeSub3c.jpg',1)"><img src="graphics/homeSub3b.jpg" name="Image21" width="348" height="54" border="0" alt="Learn More About Our Capital Investment"></a></div>
         </div></div>
      <!-- end #header -->
      <div id="mainContent">
        <div id="hometext"><h1> Main Content </h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.</p>
        <h2>H2 level heading </h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
    	<!-- end #mainContent --></div>
        <div id="rtimg"></div>
      </div>
      <div id="footer">
      <div id="logosm"><img src="graphics/base1.gif" width="189" height="43" alt=""></div>
      <div id="address">ADDRESS INFO
                </div>
                
              
     <div id="menu-copyrightHolder">   
     	<div id="bottom-menu"><a href="index.html" title="Group125 Home">HOME</a> 
                  l <a href="about.html" title="About Us">ABOUT US</a> l <a href="services.html" title="About Our Services">SERVICES</a> 
                  l <a href="industries.html" title="Industries & Sectors">INDUSTRIES &amp; SECTORS</a> l <a href="capital.html" title="Capital">
                  CAPITAL</a> l <a href="news.html" title="News & Events">NEWS &amp; EVENTS </a>l <a href="contact.html">CONTACT 
                  US</a></div>
                  
                <div id="copyright">&copy;2011-2013 
                  All Rights Reserved.</div></div>
                
                </div>
      <!-- end #footer --></div>
    <!-- end #container -->
    </body>
    </html>
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    33
    Remove the text-align: center; from your body tag as that is not required (unless you want all your body text to be centered, the same with the container div), then change your container to have auto left and right margins which will center the container on the page:
    Code:
    #container {
    	width: 1150;  
    	background: #003366; 
    	border: 1px solid #000000;
    	text-align: center; 
    	padding: 0px;
    	margin: 0 auto;
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    4
    Rep Power
    0
    Thanks simplypixie, but sadly that doesn't seem to work.

    All code is now validated, I had a few silly errors in my html like not properly closing img tags.

    So, here is the revised - validated CSS

    Code:
    @charset "UTF-8";
    body {
    	background-color:	#003366;
    	font-family:		Verdana,Arial,Helvetica,sans-serif;
    	font-size:			12px;
    	margin-top: 0;
    	margin-right: auto;
    	margin-bottom: 0px;
    	margin-left: auto;
    	padding-top: 0px;
    	padding-bottom: 0px;
    				
    }
    
    #container {
    	width: 1150;  
    	background: #003366; 
    	border: 1px solid #000000;
    	padding: 0px;
    	margin: 0 auto;
    }
    #header {
    	float: left;
    	vertical-align: middle;
    	max-width: 1150px;
    	max-height: 107px;
    	height: 107px;
    	background-color: #FFFFFF;
    	margin: 0px;
    	padding: 0px;
    	width: 1051px;
    	position: relative;
    }
    #subheader {
    	width: 1052px;
    	float: left;
    	margin: 0px;
    	padding: 0px;
    }
    #learnmore {
    	float: left;
    	width: 1150px;
    	margin: 0px;
    	padding: 0px;
    }
    #learn1 {
    	float: left;
    	width: 353px;
    }
    #learn2 {
    	float: left;
    	width: 349px;
    }
    #learn3 {
    	float: left;
    	width: 348px;
    }
    #slogan {
    	float: left;
    	vertical-align: middle;
    	padding-top: 34px;
    	padding-left: 57px;
    	background-color: #FFFFFF;
    	padding-right: 0px;
    	}
    #logo {
    	float: left;
    	width:391px;
    	background-color: #FFFFFF
    	}
    
    
     #mainContent {
    	float: left;
    	width: 1032px;
    	padding-top: 0;
    	padding-right: 0px;
    	padding-bottom: 0px;
    	padding-left: 20px;
    	background-color: #ebebeb;
    	background-attachment: scroll;
    	background-image: url(graphics/homeGlobe.jpg);
    	background-repeat: no-repeat;
    	background-position: right;
    }
    #hometext {
    	float: left;
    	width: 570px;
    	height: 318px;
    	overflow: scroll;
    	text-align: justify;
    }
    #top-menu {
    	float: left;
    	padding-left: 151px;
    	background-color: #FFFFFF;
    	width: 900px;
    }
    #rtimg {
    	float: left;
    	width: 395px;
    	padding-left: 48px;
    	padding-right: 0px;
    }
     #footer {
    	width: 1052px;
    	padding-top: 0;
    	padding-right: 0px;
    	padding-bottom: 0;
    	padding-left: 0px;
    	background-color: #1D3368;
    }
    #logosm {
    	background-color: #003366;
    	float: left;
    	/*height: 43px;*/
    	width: 189px;
    }
    #address {
    	background-color: #1D3368;
    	/*height: 43px;*/
    	padding-top: 15px;
    	color: #FFFFFF;
    	font-size: small;
    	font-weight:bold;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	text-align: center;
    	float: left;
    	padding-left: 75px;
    	width: 788px;
    	padding-bottom: 13px;
    }
    a {
    	color: #666666;
    }
    
    
    .group125AddressSpecial {
    color: #0066FF;
    font-size: small;
    font-weight:bold;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    text-align:center;
    }
    
    #copyright {
    	color: #666666;
    	font-size: xx-small;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	text-align:right;
    	text-decoration:none;
    	vertical-align: middle;
    	float: left;
    	height: 36px;
    	background-color:#FFFFFF;
    	width: 213px;
    }
    #menu-copyrightHolder {
    	background-color: #FFFFFF;
    	margin: 0px;
    	float: left;
    	height: 36px;
    	width: 1052px;
    	text-align:center;
    	padding-top: 15px;
    	padding-right: 0px;
    	padding-bottom: 0px;
    	padding-left: 0px;
    }
    
    #bottom-menu {
    	color: #666666;
    	background-color:#ffffff;
    	font-size: small;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	text-align:center;
    	text-decoration:none;
    	float: left;
    	height: 36px;
    	width: 839px;
    	margin: 0px;
    	padding: 0px;
    }
    Live test version (sans images)
    Code:
    http://dianajo.com/group125css/cssindex.html
    I'm pretty much baffled at this point.
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    33
    Just checked the page with Chrome Elements Inspector and I can see one error I missed - you are missing the unit type on the container width. It should be 1150px, not just 1150.

    Also now I look into more details, the container is actually centering but you are floating elements with a narrower width to the left so that is where they will be positioned. For example your #top-menu is 900px and floated to the left, if you want it centered then remove the float.

    But that will mean that all divs within the container div that are narrower than the container need to have margin: 0 auto; (removing float: left to get them centered on the page. Therefore why not change the width of the container to the width you want all elements to fill inside the container.

    Comments on this post

    • Dianajo agrees
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    4
    Rep Power
    0
    Thank you, thank you, thank you!

    This had been irking me for 2 days now.

IMN logo majestic logo threadwatch logo seochat tools logo