www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 18

Thread: Centering a page using CSS

  1. #1
    Join Date
    Apr 2010
    Posts
    20

    Centering a page using CSS

    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

  2. #2
    Join Date
    Aug 2009
    Posts
    593
    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>
    Last edited by thraddash; 12-13-2010 at 01:20 PM.

  3. #3
    Join Date
    Dec 2005
    Posts
    2,984
    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&#37; 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.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  4. #4
    Join Date
    Apr 2010
    Posts
    20
    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>

  5. #5
    Join Date
    Apr 2010
    Posts
    20
    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

  6. #6
    Join Date
    Dec 2005
    Posts
    2,984
    Post #3 in this thread, Doug.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  7. #7
    Join Date
    Apr 2010
    Posts
    20
    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.

  8. #8
    Join Date
    Dec 2005
    Posts
    2,984
    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&#37; width. In order to center a div, you need to specify a width.

    If you want further help, post a link.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  9. #9
    Join Date
    Apr 2010
    Posts
    20
    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.

  10. #10
    Join Date
    Aug 2009
    Posts
    593
    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>

  11. #11
    Join Date
    Apr 2010
    Posts
    20
    thraddash,

    I tried that and no difference. Any other suggestions?

    Thanks

    Doug

  12. #12
    Join Date
    Aug 2009
    Posts
    593
    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?

  13. #13
    Join Date
    Apr 2010
    Posts
    20
    thraddash,

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

  14. #14
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,198
    Centering:

    Centering anything requires setting a width less than 100&#37; 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;
    }

  15. #15
    Join Date
    Apr 2010
    Posts
    20
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles