Centering a webpage

@cjkorfMar 19.2014

Hi, I have a problem that I have been working on for several days and would appreciate some help.

I have a website that shows up centered when viewing in IE at any resolution. However, when viewing the site in Google Chrome it is not centered, but rather aligned to the left of the screen. I would like it to be centered in Chrome as well.

Here is what I am currently doing, and I’m sure the problem is in here somewhere.

This is the html I am using on my page:

<!– *******START TABLE CODE******* –>

Content here

</tD>
</tR>
</TABLE>

My css file looks like this:

#container {
margin-left: 0 auto;
margin-right: 0 auto;
width: 900px;
text-align: left;
}

body {
margin: 0 0 0px 0;
text-align: center;
}

Any help would be greatly appreciated.

to post a comment

CSS

13 Comments(s) _↴

@rtretheweyMar 19.2014 — #It would be much easier to help you if you enclosed the code in an "html" box when you post so that it gets formatted nicely here. It would also help if we could see all of your code. For example, what <!DOCTYPE> are you using?

You've got the 'width' attribute on the <table> tag set to "1003", but it's nested in the #container <div> whose CSS rules set the width at 900px. That should be resolved by matching the two settings, setting the <table> to 100%, or (best of all) removing all of those attributes from the <table> tag and do everything in the stylesheet.

@DigitalgardenMar 19.2014 — #Height and width 100% will solved your issued

@cjkorfauthorMar 19.2014 — #Ok, thanks for the help. I changed the table width to 1003 in my style.css but that didn't change anything. Ditalgarden - are you saying to change the height and width in the syle.css to 100%? Thanks for all the help.

@Sup3rkirbyMar 19.2014 — #[B]cjkorf[/B], I think you might have gotten confused with what [B]rtrethewey[/B] was telling you. In terms of your CSS, he was suggesting that you define all of your style rules in your [I]style.css[/I] file, not directly in the [B]<table>[/B] tag itself. Secondly, your <table> should have a width of 100%, not 1003 pixels. There is a <div> outside of the table (#container) that has a width of 900 pixels. Thus it makes little sense for the table to have a width of 1003 pixels given the container is smaller.

Once you update that your last problem lies in your CSS for the #container [B]<div>[/B]. You set the [I]margin-left[/I] and [I]margin-right[/I] properties with a value of '[I]0 auto[/I]', which is invalid. If you are wanting to center a block element you should simply use:

[CODE]
  margin: 0 auto;
 [/CODE]

@cjkorfauthorMar 19.2014 — #Thanks for all the help. I tried your suggestions but still not working. Not sure what is wrong.

@Sup3rkirbyMar 20.2014 — #Would you mind posting your updated HTML and CSS here just so we can verify?

@simarMar 20.2014 — #For centering the web page we can use the div tag that align the webpage to center and set the height and width of the web page.....

@SamphywiiMar 20.2014 — #You can use <div align="center"> YOUR CONTENT </div>

@cjkorfauthorMar 20.2014 — #Ok, thanks for all the help. Now that I've made some changes, my webpage is centered when viewing in google chrome, but not in IE, where before it was the opposite. Still can't get it centered in both browsers.

Sup3rkirby, here is my html and css file:

[CODE]
 <HTML>
 <HEAD>
 <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
 <TITLE>RSS Feeds </TITLE> 
 <div id="container">
 <SCRIPT language="JavaScript">
 var TlxPgNm='rssfeeds';
 </SCRIPT>
 <META http-equiv="GENERATOR" CONTENT="Created with CuteSITE Builder, HTML Exporter 5.0.150"> 
 <style type="text/css">
 <!--
 A.Top:link {color:#FFFFCC}
 A.Top:active {color:#CCCC99}
 A.Top:visited {color:#CCCC99}
 A.Bottom:link {color:#000000}
 A.Bottom:active {color:#000000}
 A.Bottom:visited {color:#000000}
 A.Left:link {color:#FFFFFF}
 A.Left:active {color:#FFFFFF}
 A.Left:visited {color:#FFFFFF}
 A.Right:link {color:#000000}
 A.Right:active {color:#000000}
 A.Right:visited {color:#000000}
 A:link {color:#000000}
 A:active {color:#000000}
 A:visited {color:#000000}
 -->
 </style>
 </HEAD>
 <body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0>
 <table cellpadding=0 cellspacing=0 border=0><tr>
 <td valign="top" colspan=3 height=100
 BGCOLOR="#FFFFFF" TEXT="#080000">
 <div><FONT SIZE="1" COLOR="#FFCC66" FACE="Arial,Helvetica,sans-serif"><B><!-- Start Gem Build Your Own Web Gem -->
 <!-- *******START TABLE CODE******* --> 

 <link rel="stylesheet" href="http://www.chiefswarpath.com/style.css" type="text/css">
 <TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="100%" BORDERCOLORLIGHT="#000000" BORDERCOLORDARK="#000000" FRAME="VOID" RULES="NONE" HSPACE="0" VSPACE="0">
 <tR>
 <tD  VALIGN=TOP BGCOLOR=#FFFFFF HEIGHT= ""  WIDTH="100%"><div><FONT SIZE="3" COLOR="#000000" FACE="Arial,Helvetica,sans-serif"> 
 <!-- *******END TABLE CODE******* -->
 <!-- *******START HEADER CODE******* -->
 <div style="text-align:RIGHT; ">
 <body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0 bgcolor="#707070">
 <table cellpadding=0 cellspacing=0 border=0><tr>
 <td valign="top" colspan=3 height=100
 BGCOLOR="#FFFFFF" TEXT="#000000" bgproperties="fixed" background="http://www.chiefswarpath.com/images/header.jpg">
 <div align="right">
 <!-- *******START GOOGLE AD******* -->
 <script type="text/javascript"><!--
 google_ad_client = "ca-pub-5751025377763738";
 /* Warpath Header */
 google_ad_slot = "4339788378";
 google_ad_width = 468;
 google_ad_height = 60;
 //-->
 </script>
 <script type="text/javascript"
 src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
 </script>
 <!-- *******END GOOGLE AD******* -->
 <!-- *******START IPHONE CODE******* -->
 <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
 <!-- *******END IPHONE CODE******* -->
 <!-- *******START FAVICON CODE******* -->
 <link rel="shortcut icon" href="http://www.chiefswarpath.com/favicon.ico" />
 <!-- *******END FAVICON CODE******* -->
 <!-- *******END HEADER CODE******* -->
 <!-- End Gem Build Your Own Web Gem -->
 </B></FONT></div>
 </td>
 </tr><tr>
 <td valign="top" width=162
 BGCOLOR="#BF0000" TEXT="#F7F7FF" background="fb5a5072dvldal.png">
 <div name="margins" style="margin-left:8px; margin-top:5px; margin-right:8px; ">
 <div style="text-align:CENTER; "><FONT SIZE="1" COLOR="#FFFFFF" FACE="Verdana"><!-- Start Gem Build Your Own Web Gem -->
 <!--///Menu///--><script LANGUAGE="JavaScript1.2" SRC="http://www.chiefswarpath.com/includes/javamenu.js"></script><!--///End of Menu///-->
 
 <!--///Highlight///-->
 <style> 
 a:hover{color:#bf0000; }
 </style>
 <!--///End of Highlight///-->
 
 <!--///Logger///-->
 <script> 
 a=new Image();
 refer=document.referrer;
 doc=document.location;
 x=screen.width;
 y=screen.height;
 a.src="http://www.chiefswarpath.com/cgi-bin/advlogger/logger.cgi?ref="+escape(refer)+"&doc="+escape(doc)+"&res="+x+"x"+y;
 </script>
 <!--///End of Logger///-->
 
 <!-- End Gem Build Your Own Web Gem -->
 </FONT></div>
 </div>
 <IMG BORDER="0" SRC="1x1.gif" HEIGHT=1 WIDTH=162></td>
 <td valign="top" height=330
 width="100%" BGCOLOR="#FFFFFF" TEXT="#080000">
 <div name="margins" style="margin-left:15px; margin-top:10px; margin-right:15px; ">
 <div style="text-align:CENTER; "><FONT SIZE="3" COLOR="#BF0000" FACE="Verdana"><B><!-- Start Gem Build Your Own Web Gem -->
 <img src="/pageheaders/rssfeeds.gif" alt="RSS Feeds" title="RSS Feeds">
 <!-- End Gem Build Your Own Web Gem -->
 </B></FONT></div>
 <div><IMG BORDER="0" SRC="1x1.gif" HEIGHT="11" ALIGN="bottom" WIDTH="1" HSPACE="0" VSPACE="0"
 ></div>
 <div><FONT SIZE="2" COLOR="#000000" FACE="Verdana">The following RSS feeds are available on ChiefsWarpath.com:</FONT></div>
 <bR>
 <div style="margin-left:24px; text-indent:-24px; "><FONT SIZE="2" COLOR="#000000" FACE="Verdana"><A HREF="http://www.chiefswarpath.com/news/feed/" TARGET="_top"    TITLE="http://www.chiefswarpath.com/news/feed/"><B><IMG BORDER="0" SRC="Wing0a73007700c800000000.png" HEIGHT="13" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">All News</B></A></FONT></div>
 <div><IMG BORDER="0" SRC="1x1.gif" HEIGHT="4" ALIGN="bottom" WIDTH="1" HSPACE="0" VSPACE="0"
 ></div>
 <div style="margin-left:24px; text-indent:-24px; "><FONT SIZE="2" COLOR="#000000" FACE="Verdana"><A HREF="http://www.chiefswarpath.com/news/category/latestnews/feed/" TARGET="_top"    TITLE="http://www.chiefswarpath.com/news/catego"><B><IMG BORDER="0" SRC="Wing0a73007700c800000000.png" HEIGHT="13" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Latest News</B></A></FONT></div>
 <div><IMG BORDER="0" SRC="1x1.gif" HEIGHT="4" ALIGN="bottom" WIDTH="1" HSPACE="0" VSPACE="0"
 ></div>
 <div style="margin-left:24px; text-indent:-24px; "><FONT SIZE="2" COLOR="#000000" FACE="Verdana"><A HREF="http://www.chiefswarpath.com/news/category/commentary/feed/" TARGET="_top"    TITLE="http://www.chiefswarpath.com/news/catego"><B><IMG BORDER="0" SRC="Wing0a73007700c800000000.png" HEIGHT="13" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Commentary</B></A></FONT></div>
 <div><IMG BORDER="0" SRC="1x1.gif" HEIGHT="4" ALIGN="bottom" WIDTH="1" HSPACE="0" VSPACE="0"
 ></div>
 <div style="margin-left:24px; text-indent:-24px; "><FONT SIZE="2" COLOR="#000000" FACE="Verdana"><A HREF="http://www.chiefswarpath.com/news/category/chiefheadlines/feed/" TARGET="_top"    TITLE="http://www.chiefswarpath.com/news/catego"><B><IMG BORDER="0" SRC="Wing0a73007700c800000000.png" HEIGHT="13" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Chief Headlines</B></A></FONT></div>
 <div><IMG BORDER="0" SRC="1x1.gif" HEIGHT="4" ALIGN="bottom" WIDTH="1" HSPACE="0" VSPACE="0"
 ></div>
 <bR>
 <div><FONT SIZE="2" COLOR="#000000" FACE="Verdana"><B>What is RSS?</B></FONT></div>
 <bR>
 <div><FONT SIZE="2" COLOR="#000000" FACE="Verdana">RSS allows sites like this one to syndicate content to other sites and news readers. It will allow you to keep track of when this site is updated.</FONT></div>
 <bR>
 <div><FONT SIZE="2" COLOR="#000000" FACE="Verdana"><B>How do I use RSS feeds?</B></FONT></div>
 <bR>
 <div><FONT SIZE="2" COLOR="#000000" FACE="Verdana">All modern browsers have built in RSS readers. There are also a number of services like iGoogle, MyYahoo! and MSN that allow you to put RSS feed URL's into your personal pages and show you a feed of the latest content from this site.</FONT></div>
 </div>
 </td>
 <td valign="top" width=180
 BGCOLOR="#DDDDDD" TEXT="#080000">
 <div name="margins" style="margin-left:10px; margin-top:5px; margin-right:10px; ">
 <div style="text-align:CENTER; "><FONT SIZE="1" COLOR="#000000" FACE="Verdana"><!-- Start Gem Build Your Own Web Gem -->
 <!-- *******START RIGHT FRAME HP******* --> 
 <div style="text-align:CENTER; "><FONT SIZE="1" COLOR="#000000" FACE="Verdana"><a href="http://www.chiefswarpath.com/rssfeeds.htm"><IMG SRC="http://www.chiefswarpath.com/images/rss.jpg" border=0 width="25" height="25" ALT="RSS" title="RSS"  ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></a> &nbsp;&nbsp;&nbsp;<a href="http://www.facebook.com/chiefswarpath" target="_blank"><IMG SRC="http://www.chiefswarpath.com/images/fbook.jpg" border=0 width="25" height="25" ALT="Facebook" title="Facebook" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></a> &nbsp;&nbsp;&nbsp;<a href="http://twitter.com/chiefswarpath_" target="_blank"><IMG SRC="http://www.chiefswarpath.com/images/twit.jpg" border=0 width="25" height="25" ALT="Twitter"  title="Twitter" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></a></div><p>
 <font face="verdana" size="1" color="#000000">
 </font>
 <!-- *******START GOOGLE AD******* -->
 <script type="text/javascript"><!--
 google_ad_client = "ca-pub-5751025377763738";
 /* Warpath Side Ad */
 google_ad_slot = "8906668207";
 google_ad_width = 120;
 google_ad_height = 600;
 //-->
 </script>
 <script type="text/javascript"
 src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
 </script>
 <!-- *******END GOOGLE AD******* -->
 <p>
 <a href="http://www.chiefswarpath.com/features/fanshop.htm"><img src="/images/125x125ff.jpg" alt="Warpath Fan Shop" title="Warpath Fan Shop" border="0"></a>
 <p>
 <!-- *******END RIGHT FRAME HP******* --> 
 <!-- End Gem Build Your Own Web Gem -->
 </FONT></div>
 </div>
 <IMG BORDER="0" SRC="1x1.gif" HEIGHT=1 WIDTH=180></td>
 </tr><tr>
 <td valign="top" colspan=3 height=50
 BGCOLOR="#000000" TEXT="#F7F7FF">
 <div name="margins" style="margin-left:10px; margin-top:10px; margin-right:10px; ">
 <div style="text-align:CENTER; "><FONT SIZE="1" COLOR="#FFFFFF" FACE="Verdana"><!-- Start Gem Build Your Own Web Gem -->
 <!--///Footer///--><script LANGUAGE="JavaScript1.2" SRC="http://www.chiefswarpath.com/includes/footer.js"></script><!--///End of Footer///-->
 
 <!-- *******START TABLE CODE******* -->
 </FONT></div>
 </tD>
 </tR>
 </TABLE>
 <!-- *******END TABLE CODE******* -->
 
 <!-- End Gem Build Your Own Web Gem -->
 </FONT></div>
 </div>
 </td>
 </tr></table></body>
 </HTML>[/CODE]

@cjkorfauthorMar 20.2014 — #And here is the CSS File:

CSS File:

[CODE]body { 
 text-align: center; 
 } 
 
 #container { 
 margin-left: auto; 
 margin-right: auto;
 width: 900px; 
 text-align: left; 
 }  [/CODE]

@Sup3rkirbyMar 20.2014 — #Oh boy... Your HTML is pretty messy. You have 2 [B]<body>[/B] tags as well as the [B]<div id="container">[/B] inside of your [B]<head>[/B] tag (which is a no-no). I also see some use of the [B]<font>[/B] tag, which is no longer supported in HTML5. Which, on a similar note I feel I should mention to [B]Samphywii[/B] that the [I]align[/I] attribute of the [B]<div>[/B] element is also deprecated in HTML5.

Moving on, I also see a [B]<link>[/B] tag that is in the [B]<body>[/B] of the page. [B]<link>[/B] tags should only be found in the [B]<head>[/B] of a page. Frankly it's a bit hard to fix your centering problem because the HTML itself is malformed. You have several tags that are opened but never properly closed and vice versa. I don't want to seem rude here but I do think if you want your page to work properly in all browsers you're going to need to rebuild your HTML code properly.

Maybe someone here can help you reform your code. If anything I'll give it a look when I get home tonight.

@Kevin2Mar 20.2014 — #http://validator.w3.org

At a minimum your current errors include having 2 <body> tags and having <link> tags within the body instead in the <head>. Lots of other errors, many of which can mess with your layout.

EDIT: Got distracted and ended up posting well after Sup3rkirby. But "Oh boy..." was also my reaction to the code. ?

@cjkorfauthorMar 21.2014 — #Thanks for all the help guys. I know the code is pretty outdated. I use a very old program to create my site and I guess it's days are over. I will probably just move my site over to another program such as wordpress. Thanks again.

Also in #CSS _↴

how to auto alignment in table Rectangle block wont go to bottom of page.DIVs hell - new problem

Success!

Help @cjkorf spread the word by sharing this article on Twitter...

Tweet This

Centering a webpage

13 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Centering a webpage

13 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

13 Comments(s) _↴

Also in #CSS _↴