Centering a page using CSS

**dougancil** · 12-13-2010 01:08 PM

I have a web site that for most people they're seeing it left-justified and I've added the following to my css:

div#container
{
margin-left: auto;
margin-right: auto;
height: auto;
width: auto;
font-family: "Franklin Gothic Demi Cond";
background-color: #FFFF;
}

This is my first time really using CSS and I would like to have someone who has more experience with CSS reviewing this and letting me know what I may have done right or wrong with this.

Thank you

Doug

**thraddash** · 12-13-2010 01:14 PM

Many things could affect how the styles are applied to the document, such as DocType and if your content area decided to have a smaller width than the body.

Here is a template I like to use...

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" xml:lang="en" lang="en">
	<head>
		<title>Center Content</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<style type="text/css">

			.Content {
				width: 800px;
				margin: 0px auto;
				border: solid 1px #000;
			}

		</style>

	</head>
	<body>

		<div class="Content">
			Content<br />
			Content<br />
			Content<br />
			Content<br />
			Content<br />
			Content<br />
			Content<br />
			Content<br />
			Content<br />
			Content<br />
			Content<br />
			Content<br />
			Content<br />
			Content<br />
			Content<br />
			Content<br />
			Content<br />
			Content<br />
			Content<br />
			Content<br />
		</div>

	</body>
</html>

**aj_nsc** · 12-13-2010 01:24 PM

If you set a div to have width:auto and don't change it's display to inline then it will automatically always be 100% of the browser....so the containing element is centered technically, because it's 100% of the width.

If you want to see it centered, give it a fixed width (e.g. 990px) and set some borders on it so you can see where the containing element is:

Code:

#container {
   width: 990px;
   margin:0 auto;
   border: 1px solid #fff;
   height: 500px; /* only if you don't have any content in it */
}

HTML Code:

<!doctype html>
<html>
 <head>
  <title>Test</title>
  <link rel="stylesheet" href="css/web.css" type="text/css" media="screen"/>
 </head>
 <body>
   <div id="container">&nbsp;</div>
 </body>
</html>

Where the first file is saved in a subdirectory (css) with the filename web.css.

**dougancil** · 12-13-2010 01:38 PM

Ok here's the html I have (along with my css)

Code:

<html>
<head>
<title>MSB secondary page template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="site_layout.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="container">
  <div id="site_layout">
    <div class="css" id="site_layout.css">
      <table id="Table_01" width="1260" height="811" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td colspan="26">
            <img src="images/MSB-secondary-page-template_01.gif" width="1259" height="24" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="24" alt=""></td>
          </tr>
        <tr>
          <td colspan="20" rowspan="2">
            <img src="images/MSB-secondary-page-template_02.gif" width="1036" height="48" alt=""></td>
          <td colspan="2">
            <img src="images/MSB-secondary-page-template_03.jpg" width="60" height="22" alt=""></td>
          <td colspan="4" rowspan="5">
            <img src="images/MSB-secondary-page-template_04.gif" width="163" height="65" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="22" alt=""></td>
          </tr>
        <tr>
          <td colspan="2" rowspan="4">
            <img src="images/MSB-secondary-page-template_05.gif" width="60" height="43" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="26" alt=""></td>
          </tr>
        <tr>
          <td colspan="19">
            <img src="images/MSB-secondary-page-template_06.gif" width="873" height="8" alt=""></td>
          <td rowspan="5">
            <img src="images/MSB-secondary-page-template_07.jpg" width="163" height="58" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="8" alt=""></td>
          </tr>
        <tr>
          <td colspan="3" rowspan="5">
            <img src="images/MSB-secondary-page-template_08.gif" width="166" height="51" alt=""></td>
          <td rowspan="5">
            <img src="images/MSB-secondary-page-template_09.jpg" width="120" height="51" alt=""></td>
          <td rowspan="5">
            <img src="images/MSB-secondary-page-template_10.gif" width="16" height="51" alt=""></td>
          <td rowspan="5">
            <img src="images/MSB-secondary-page-template_11.jpg" width="120" height="51" alt=""></td>
          <td colspan="13">
            <img src="images/MSB-secondary-page-template_12.gif" width="451" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="1" alt=""></td>
          </tr>
        <tr>
          <td rowspan="4">
            <img src="images/MSB-secondary-page-template_13.gif" width="19" height="50" alt=""></td>
          <td colspan="2" rowspan="4">
            <img src="images/MSB-secondary-page-template_14.jpg" width="119" height="50" alt=""></td>
          <td colspan="2" rowspan="4">
            <img src="images/MSB-secondary-page-template_15.gif" width="22" height="50" alt=""></td>
          <td colspan="4" rowspan="4">
            <img src="images/MSB-secondary-page-template_16.jpg" width="118" height="50" alt=""></td>
          <td rowspan="4">
            <img src="images/MSB-secondary-page-template_17.gif" width="19" height="50" alt=""></td>
          <td colspan="2" rowspan="4">
            <img src="images/MSB-secondary-page-template_18.jpg" width="118" height="50" alt=""></td>
          <td rowspan="4">
            <img src="images/MSB-secondary-page-template_19.gif" width="36" height="50" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="8" alt=""></td>
          </tr>
        <tr>
          <td rowspan="3">
            <img src="images/MSB-secondary-page-template_20.gif" width="8" height="42" alt=""></td>
          <td colspan="2">
            <img src="images/MSB-secondary-page-template_21.jpg" width="58" height="24" alt=""></td>
          <td colspan="3" rowspan="3">
            <img src="images/MSB-secondary-page-template_22.gif" width="157" height="42" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="24" alt=""></td>
          </tr>
        <tr>
          <td colspan="2" rowspan="2">
            <img src="images/MSB-secondary-page-template_23.gif" width="58" height="18" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="17" alt=""></td>
          </tr>
        <tr>
          <td>
            <img src="images/MSB-secondary-page-template_24.gif" width="163" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="1" alt=""></td>
          </tr>
        <tr>
          <td rowspan="4">
            <img src="images/MSB-secondary-page-template_25.gif" width="148" height="665" alt=""></td>
          <td colspan="15">
            <img src="images/MSB-secondary-page-template_26.jpg" width="571" height="221" alt=""></td>
          <td colspan="8">
            <img src="images/MSB-secondary-page-template_27.jpg" width="405" height="221" alt=""></td>
          <td colspan="2" rowspan="4">
            <img src="images/MSB-secondary-page-template_28.gif" width="135" height="665" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="221" alt=""></td>
          </tr>
        <tr>
          <td rowspan="3">
            <img src="images/MSB-secondary-page-template_29.gif" width="1" height="444" alt=""></td>
          <td colspan="22">
            <img src="images/MSB-secondary-page-template_30.gif" width="975" height="402" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="402" alt=""></td>
          </tr>
        <tr>
          <td colspan="6" rowspan="2">
            <img src="images/MSB-secondary-page-template_31.gif" width="388" height="42" alt=""></td>
          <td colspan="2">
            <img src="images/MSB-secondary-page-template_32.jpg" width="44" height="21" alt=""></td>
          <td colspan="2" rowspan="2">
            <img src="images/MSB-secondary-page-template_33.gif" width="12" height="42" alt=""></td>
          <td>
            <img src="images/MSB-secondary-page-template_34.jpg" width="77" height="21" alt=""></td>
          <td rowspan="2">
            <img src="images/MSB-secondary-page-template_35.gif" width="10" height="42" alt=""></td>
          <td colspan="3">
            <img src="images/MSB-secondary-page-template_36.jpg" width="53" height="21" alt=""></td>
          <td colspan="7" rowspan="2">
            <img src="images/MSB-secondary-page-template_37.gif" width="391" height="42" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="21" alt=""></td>
          </tr>
        <tr>
          <td colspan="2">
            <img src="images/MSB-secondary-page-template_38.gif" width="44" height="21" alt=""></td>
          <td>
            <img src="images/MSB-secondary-page-template_39.gif" width="77" height="21" alt=""></td>
          <td colspan="3">
            <img src="images/MSB-secondary-page-template_40.gif" width="53" height="21" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="21" alt=""></td>
          </tr>
        <tr>
          <td colspan="25">
            <img src="images/MSB-secondary-page-template_41.jpg" width="1250" height="14" alt=""></td>
          <td>
            <img src="images/MSB-secondary-page-template_42.gif" width="9" height="14" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="14" alt=""></td>
          </tr>
      </table>
    </div>
  </div>
</div>
</body>
</html>

**dougancil** · 12-13-2010 01:39 PM

and here is my css

and here is my css

Code:

#site_layout {
	font-family: "Franklin Gothic Demi Cond";
	background-color: #FFF;
	height: auto;
	width: auto;
	margin-left: auto;
	margin-right: auto;
}

and I know that this problem is caused by something not being right in the css file. I hope that supplying this information will help. If someone could maybe see where my error is and comment, I'd greatly appreciate it. Also just as an fyi, the reason that this page is in a table is that I converted it from a psd to an html with photoshop.

Thank you
Doug

**aj_nsc** · 12-13-2010 03:30 PM

Post #3 in this thread, Doug.

**dougancil** · 12-13-2010 03:36 PM

Aj,

So then you're suggesting to me to remove all of the table specs out of the html and put them into the container in the css file?

Specifically this line:

<table id="Table_01" width="1260" height="811" border="0" cellpadding="0" cellspacing="0">

and make my css look something more like this:

#site_layout {
font-family: "Franklin Gothic Demi Cond";
background-color: #FFF;
height: auto;
width: 1260 px;
margin-left: auto;
margin-right: auto;
}

Because the page itself has gradient elements that I can't have a white border around the page sides. I'm just trying to make sure that no matter who looks at the page that it's centered and fills up the page (with the gradient.) So the users don't see the border of the background and the gradient that's on the page.

**aj_nsc** · 12-13-2010 03:43 PM

I have no idea of the specifics of your problem, you didn't provide a link or, before the latest post, details. All I'm telling you is that you can't "center" a div that is width: auto and whose containing element is the browser - because it will always be 100% width. In order to center a div, you need to specify a width.

If you want further help, post a link.

**dougancil** · 12-13-2010 03:56 PM

Aj,

Part of the problem is that this is an internal web site so I don't have an external link at this point.

The specifics of the problem are as such:

this page is a converted psd file to html. It is a table that I need to center on a page but has gradient elements in the upper 1/4 of the page. What some users are seeing is that the page is left justified and shows a "border" of where the white background shows and the gradient on the page stops.

**thraddash** · 12-13-2010 03:58 PM

Try this...

Code:

#site_layout {
	font-family: "Franklin Gothic Demi Cond";
	background-color: #FFF;
}

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" xml:lang="en" lang="en">
<head>
<title>MSB secondary page template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="site_layout.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="container">
  <div id="site_layout">
    <div class="css" id="site_layout.css">
      <table id="Table_01" width="1260" height="811" border="0" cellpadding="0" cellspacing="0" style="margin: 0px auto;">
        <tr>
          <td colspan="26">
            <img src="images/MSB-secondary-page-template_01.gif" width="1259" height="24" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="24" alt=""></td>
          </tr>
        <tr>
          <td colspan="20" rowspan="2">
            <img src="images/MSB-secondary-page-template_02.gif" width="1036" height="48" alt=""></td>
          <td colspan="2">
            <img src="images/MSB-secondary-page-template_03.jpg" width="60" height="22" alt=""></td>
          <td colspan="4" rowspan="5">
            <img src="images/MSB-secondary-page-template_04.gif" width="163" height="65" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="22" alt=""></td>
          </tr>
        <tr>
          <td colspan="2" rowspan="4">
            <img src="images/MSB-secondary-page-template_05.gif" width="60" height="43" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="26" alt=""></td>
          </tr>
        <tr>
          <td colspan="19">
            <img src="images/MSB-secondary-page-template_06.gif" width="873" height="8" alt=""></td>
          <td rowspan="5">
            <img src="images/MSB-secondary-page-template_07.jpg" width="163" height="58" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="8" alt=""></td>
          </tr>
        <tr>
          <td colspan="3" rowspan="5">
            <img src="images/MSB-secondary-page-template_08.gif" width="166" height="51" alt=""></td>
          <td rowspan="5">
            <img src="images/MSB-secondary-page-template_09.jpg" width="120" height="51" alt=""></td>
          <td rowspan="5">
            <img src="images/MSB-secondary-page-template_10.gif" width="16" height="51" alt=""></td>
          <td rowspan="5">
            <img src="images/MSB-secondary-page-template_11.jpg" width="120" height="51" alt=""></td>
          <td colspan="13">
            <img src="images/MSB-secondary-page-template_12.gif" width="451" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="1" alt=""></td>
          </tr>
        <tr>
          <td rowspan="4">
            <img src="images/MSB-secondary-page-template_13.gif" width="19" height="50" alt=""></td>
          <td colspan="2" rowspan="4">
            <img src="images/MSB-secondary-page-template_14.jpg" width="119" height="50" alt=""></td>
          <td colspan="2" rowspan="4">
            <img src="images/MSB-secondary-page-template_15.gif" width="22" height="50" alt=""></td>
          <td colspan="4" rowspan="4">
            <img src="images/MSB-secondary-page-template_16.jpg" width="118" height="50" alt=""></td>
          <td rowspan="4">
            <img src="images/MSB-secondary-page-template_17.gif" width="19" height="50" alt=""></td>
          <td colspan="2" rowspan="4">
            <img src="images/MSB-secondary-page-template_18.jpg" width="118" height="50" alt=""></td>
          <td rowspan="4">
            <img src="images/MSB-secondary-page-template_19.gif" width="36" height="50" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="8" alt=""></td>
          </tr>
        <tr>
          <td rowspan="3">
            <img src="images/MSB-secondary-page-template_20.gif" width="8" height="42" alt=""></td>
          <td colspan="2">
            <img src="images/MSB-secondary-page-template_21.jpg" width="58" height="24" alt=""></td>
          <td colspan="3" rowspan="3">
            <img src="images/MSB-secondary-page-template_22.gif" width="157" height="42" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="24" alt=""></td>
          </tr>
        <tr>
          <td colspan="2" rowspan="2">
            <img src="images/MSB-secondary-page-template_23.gif" width="58" height="18" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="17" alt=""></td>
          </tr>
        <tr>
          <td>
            <img src="images/MSB-secondary-page-template_24.gif" width="163" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="1" alt=""></td>
          </tr>
        <tr>
          <td rowspan="4">
            <img src="images/MSB-secondary-page-template_25.gif" width="148" height="665" alt=""></td>
          <td colspan="15">
            <img src="images/MSB-secondary-page-template_26.jpg" width="571" height="221" alt=""></td>
          <td colspan="8">
            <img src="images/MSB-secondary-page-template_27.jpg" width="405" height="221" alt=""></td>
          <td colspan="2" rowspan="4">
            <img src="images/MSB-secondary-page-template_28.gif" width="135" height="665" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="221" alt=""></td>
          </tr>
        <tr>
          <td rowspan="3">
            <img src="images/MSB-secondary-page-template_29.gif" width="1" height="444" alt=""></td>
          <td colspan="22">
            <img src="images/MSB-secondary-page-template_30.gif" width="975" height="402" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="402" alt=""></td>
          </tr>
        <tr>
          <td colspan="6" rowspan="2">
            <img src="images/MSB-secondary-page-template_31.gif" width="388" height="42" alt=""></td>
          <td colspan="2">
            <img src="images/MSB-secondary-page-template_32.jpg" width="44" height="21" alt=""></td>
          <td colspan="2" rowspan="2">
            <img src="images/MSB-secondary-page-template_33.gif" width="12" height="42" alt=""></td>
          <td>
            <img src="images/MSB-secondary-page-template_34.jpg" width="77" height="21" alt=""></td>
          <td rowspan="2">
            <img src="images/MSB-secondary-page-template_35.gif" width="10" height="42" alt=""></td>
          <td colspan="3">
            <img src="images/MSB-secondary-page-template_36.jpg" width="53" height="21" alt=""></td>
          <td colspan="7" rowspan="2">
            <img src="images/MSB-secondary-page-template_37.gif" width="391" height="42" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="21" alt=""></td>
          </tr>
        <tr>
          <td colspan="2">
            <img src="images/MSB-secondary-page-template_38.gif" width="44" height="21" alt=""></td>
          <td>
            <img src="images/MSB-secondary-page-template_39.gif" width="77" height="21" alt=""></td>
          <td colspan="3">
            <img src="images/MSB-secondary-page-template_40.gif" width="53" height="21" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="21" alt=""></td>
          </tr>
        <tr>
          <td colspan="25">
            <img src="images/MSB-secondary-page-template_41.jpg" width="1250" height="14" alt=""></td>
          <td>
            <img src="images/MSB-secondary-page-template_42.gif" width="9" height="14" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="14" alt=""></td>
          </tr>
      </table>
    </div>
  </div>
</div>
</body>
</html>

**dougancil** · 12-13-2010 04:26 PM

thraddash,

I tried that and no difference. Any other suggestions?

Thanks

Doug

**thraddash** · 12-13-2010 04:31 PM

I am surprised, although I do not have all the images your linking to, the table was centering in both FireFox and IE for me. Did you also use the HTML that was posted, as I moved your margining to the <table> element and added a DocType?

Did anything change at all on your side?

**dougancil** · 12-13-2010 04:39 PM

thraddash,

I did change the Doctype but didn't change the table element. Let me try it again and I'll let you know.

**Major Payne** · 12-14-2010 09:33 AM

Centering:

Centering anything requires setting a width less than 100% for the container. Example:

Code:

body {
width: 90%;
height: 600px; /* optional */
margin: 0 auto;
background: #fff url(path to non-tiled image) no-repeat center scroll;
}

Example as a class:

Code:

.selector_name {
width: 90%;
height: 600px; /* optional */
margin: 0 auto;
background: #fff url(path to non-tiled image) no-repeat center scroll;
}

Example as an id:

Code:

#selector_name {
width: 90%;
height: 600px; /* optional */
margin: 0 auto;
background: #fff url(path to non-tiled image) no-repeat center scroll;
}

**dougancil** · 12-14-2010 01:53 PM

Thraddash,

I fixed the issue it seems that the div tag was what was causing it.

here's how it now looks:

Code:

<div id="container">
  <div id="site_layout">
    <div class="css" id="site_layout">

Thread: Centering a page using CSS

Thread Tools

Display

Centering a page using CSS

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions