View Full Version : Struggling to center content with CSS

05-01-2009, 03:38 AM

My test site can be viewed at http://deon.gotdns.com/preondemo/indexdemo1.php. It looks the same in IE7 and FF.

My problem is that I cannot center the content (currently the grey text and flash photos between the left side menu and the right side pictures of my page) even though I use "margin-left:auto; mmargin-right: auto" in my CSS.

I appreciate any help anybody can offer because I am really struggling with this.


CSS code:
body { color: gray; background-color:white; font-size:12px; font-family:Lucida Grande, Trebuchet MS, Verdana, Helvetica, sans-serif; }
div.header { height:137px; width:800px; margin-left: auto; margin-right: auto; }
div.nav { float:left; color:black; height:700px; width:190px; border-right: thin dotted silver;}
/* div.news { float:right; width:200px; height:auto; background-color:white; text-align: left; color: #ffffff; padding : 5px; } */
div.projects { verticle-align:top; float:right; width:200px; height:auto; background-color:#ffffff; text-align: left; padding : 5px; border-left: thin dotted silver; }
div.content { margin-left:auto; margin-right:auto; }
div.footer { clear:both; padding:0px; color:black; text-decoration: none; margin-left:auto; margin-right:auto; font-size:11px;
font-family:Lucida Grande, Trebuchet MS, Verdana, Helvetica, sans-serif; text-align: center; }
div.footerleft { color:black; text-decoration: none; float:left; font-size:11px; padding:5px;
font-family:Lucida Grande, Trebuchet MS, Verdana, Helvetica, sans-serif; text-align: center; }
div.footerright { clear:both; color:black; text-decoration: none; float:right; font-size:11px; padding:5px;
font-family:Lucida Grande, Trebuchet MS, Verdana, Helvetica, sans-serif; text-align: center; }

a:link {color:#01355D; text-decoration:none; }
a:visited {color:#01355D; text-decoration:none; }
a:hover {color:#0f4164; text-decoration:underline; }
a:active {color:#01355D; text-decoration:none; }

img.center { margin-left:auto; margin-right:auto; }
img.left { float:left; padding:10px; }
img.right { float:right; padding:10px; }
div.imageright { float:right; margin: 10px; padding:5px; border:1px solid gray; text-align:center; }

width: 180px; /*width of accordion menu*/

.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 14px Arial;
color: white;
background: black url(titlebar.png) repeat-x center left;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;

.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
background-image: url(titlebar-active.png);

.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/

.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/

.arrowlistmenu ul li a{
color: #A70303;
background: url(arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;

.arrowlistmenu ul li a:visited{
color: #A70303;

.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #A70303;
background-color: #F3F3F3;

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

<title>Preon Power, Inc. Integrating Energy for a New World.</title>
<meta name="Description" content="Preon Power, Inc. Integrating Energy for a New World through microturbine and CHP" />
<meta name="Keywords" content="Preon Power integrating energy engineering tim tawoda micro turbine microturbine DG CHP Power green energy CTA Chicago Transport Authority
Chicago Police Chicago schools methane fields Reflectasite" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Author" content="www.reflectasite.com" />
<link rel="stylesheet" type="text/css" href="mystyle.css" />
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-base.css" />
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-topbar.css" />
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-sidebar.css" />

<script type="text/javascript" src="ddlevelsfiles/ddlevelsmenu.js">
* All Levels Navigational Menu- (c) Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code

<div class="header">
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0"
ID=demoflash1 WIDTH=800 HEIGHT=130>
<PARAM NAME="wmode" value="transparent">
<PARAM NAME=movie VALUE="demoflash1.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=loop VALUE=false>
<EMBED src="demoflash1.swf" loop=false quality=high WIDTH=800 HEIGHT=130 wmode="transparent" TYPE="application/x-shockwave-flash"

<!-- Top Horizontal Menu-->
<div id="ddtopmenubar" class="matttabs">
<li><a href="index.php?content=finance">Finance</a></li>
<li><a href="index.php?content=service">Service</a></li>
<li><a href="index.php?content=engineering">Engineering</a></li>
<li><a href="index.php?content=pq" rel="ddsubmenu2">Power Quality Sales</a></li>
<li><a href="index.php?content=dg" rel="ddsubmenu1">Distribution Generation Sales</a></li>

<script type="text/javascript">ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar")

<!-- Top Drop Down Menu 1 HTML-->
<ul id="ddsubmenu1" class="ddsubmenustyle">
<li><a href="index.php?content=microturbines">Micro Turbines</a></li>
<li><a href="index.php?content=chp">CHP</a></li>

<!-- Top Drop Down Menu 2 HTML-->
<ul id="ddsubmenu2" class="ddsubmenustyle">
<li><a href="index.php?content=ups">UPS</a></li>
<li><a href="index.php?content=gensets">Gensets</a></li>
<li><a href="index.php?content=switchgear">Switchgear</a></li>
<li><a href="index.php?content=monitoring">Monitoring</a></li>
<li><a href="index.php?content=control">Control</a></li>

<br />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="ddaccordion.js">
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use

<script type="text/javascript">
headerclass: "expandable", //Shared CSS class name of headers group that are expandable
contentclass: "categoryitems", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing

<div class="projects">
<?php include("projects.inc");

<!-- Left Menu Starts Here -->
<div class="nav">

<div class="arrowlistmenu">
<h3 class="menuheader" style="cursor: default">Home</h3>
<h3 class="menuheader expandable">About Preon</h3>
<ul class="categoryitems">
<li><a href="index.php?content=strategic">Strategic Differentiator</a></li>
<li><a href="index.php?content=mission">Mission</a></li>
<li><a href="index.php?content=management">Management</a></li>
<li><a href="index.php?content=history">History</a></li>
<h3 class="menuheader expandable">Company Info</h3>
<ul class="categoryitems">
<li><a href="index.php?content=mission">Business Units</a></li>
<li><a href="index.php?content=requestinfo">Request Information</a></li>
<h3 class="menuheader expandable">Projects</h3>
<ul class="categoryitems">
<li><a href="index.php?content=chicago">Chicago Police Station</a></li>
<li><a href="index.php?content=wyoming">Wyoming Gas Fields</a></li>
<li><a href="index.php?content=savanna">Savanna Army Depot</a></li>
<li><a href="index.php?content=ravallo">Ravallo Resort</a></li>
<h3 class="menuheader expandable">News</h3>
<ul class="categoryitems">
<li><a href="index.php?content=press">Press Releases</a></li>
<li><a href="index.php?content=newsletters">Newsletters</a></li>

<h4>Proudly Serving You</h4>
Elmhurst, IL * 218-555-9156<br />
Seattle, WA * 446-555-4151<br />
Sheridan, WY * 761-555-7821<br />
Snow Camp, NC * 336-555-1778

<div class="content">
<?php if (!isset($_REQUEST['content']))
$content = $_REQUEST['content'];
if (substr($content, 0, 4) == "http")
echo "Invalid page code\n";
} else
$nextpage = $content . ".inc";

<div class="footer">
<?php include("footer.inc");


05-01-2009, 04:18 AM
Fixed in.. just added "text-align: center" and it did it. Not sure why it needed it though.. but oh well...

05-01-2009, 05:47 AM
Fixed in.. just added "text-align: center" and it did it. Not sure why it needed it though.. but oh well...

I didn't look through your posted code and the site is down now? Normally, to center things you need to give them a width.

The 3 things needed to center an element:

a DocType
an element with a width
that elements left/right margins set to auto