Centering The Page Like MSN.com and some other sites

	Centering The Page - Like MSN.com and some other sites
	Discussion by FirefoxRocks with 9 Replies. Last Update: November 17, 2008, 7:25 am

FirefoxRocks

Many sites have a ~780px layout because it fits well with a 800x600px resolution monitor. The problem is that I want the whole thing centered in the middle of the screen with equal margins at the sides. My CSS is at (Gone, this was MY site - 404)http://portal.trap17.com/wdl/styles.css and as you would probably guess, my site is at (Gone, this was MY site - 404)http://portal.trap17.com/wdl/

It is centered in Gecko (Firefox) browsers, but in Internet Explorer it isn't centered. No matter what I use, whether it is a container <div> or centering the <html> and <body> elements, it just doesn't work in Internet Explorer :ph34r:

I use a table for layout (yes, I know it is a bad habit) and I serve my pages text/html to IE and application/xhtml+xml to Firefox and Opera. Maybe that might be the problem?

NOTE: This problem was also posted in the W3Schools forum, but no one found a solution yet

Wed Apr 18, 2007 Reply New Discussion

faulty.lee

I use

CODE

I just tested. I saved a copy of your index. Then apply the changes, voila

This is part of the changes I've done

CODE

......
<body>
<div id="outer"><center>
<table id="page">
......
</table></center>
</div>
......

That's it. Good luck

EDIT: I've only tested it on Firefox 2.0 and IE6 (Winxp SP2)

Wed Apr 18, 2007 Reply New Discussion

pyost

As far as I can see from your source code, inside the <body> tag you have one DIV, and then one TABLE. The simplest solution would be to remove the DIV container (as it is not necessary this way), and add align="center" to the TABLE tag. This will center the main table in all browsers. However, web developers/designers usually don't like this solution as it is, how I like to call it, "outdated". You can do exactly the same thing with the DIV container, and it's quite simple - you probably just didn't try this combination.

The only thing you need to change is the CSS. In the body properties, include text-align: center (aligns the whole page in Internet Explorer), and in the #outer properties use margin: 0 auto 0 auto and text-align: left. The first one centers the DIV, and the second one is used to nullify the effect text-align: center (from the BODY) would have on the text inside the DIV.

@faulty.lee

I don't think "center" is a valid XHTML tag

It's even more "outdated" than the align="center" solution I mentioned :ph34r:

Wed Apr 18, 2007 Reply New Discussion

faulty.lee

QUOTE (pyost)

I don't think "center" is a valid XHTML tag

It's even more "outdated" than the align="center" solution I mentioned :ph34r:

Link: view Post: 102096

Sorry, bout that, didn't notice it was a xhtml. Well, just want to get a quick workaround. Thanks for pointing out

Wed Apr 18, 2007 Reply New Discussion

livingston

Use the following code to align the enite contents of the page in the center of the page, i.e the contents of <div> tag. This will also reset the alignment of the contents within the <div> tag to left.

CODE

body
{
text-align: center;
}
div#container
{
margin-left: auto;
margin-right: auto;
width: 50em;
text-align: left;
}

Wed Apr 18, 2007 Reply New Discussion

TavoxPeru

QUOTE (FirefoxRocks)

Many sites have a ~780px layout because it fits well with a 800x600px resolution monitor. The problem is that I want the whole thing centered in the middle of the screen with equal margins at the sides. My CSS is at http://portal.trap17.com/wdl/styles.css and as you would probably guess, my site is at http://portal.trap17.com/wdl/

It is centered in Gecko (Firefox) browsers, but in Internet Explorer it isn't centered. No matter what I use, whether it is a container <div> or centering the <html> and <body> elements, it just doesn't work in Internet Explorer :ph34r:

Link: view Post: 102093

Hi, can you try to use the margin property setting to 0 auto, i use the following css code to center a page:

CODE

html {height:100%;padding:0;margin:0;}
body {height:100%;color:#000;font-family:Verdana,Georgia,sans-serif;font-size:100.1%;margin:0;text-align:center;padding:0;}
#maincontent {width:780px; text-align:left; margin: 0 auto; }
/* other stUff */

Best regards,

Thu Apr 19, 2007 Reply New Discussion

Cory R.

I have been looking for a solution to this for a while now!
And when I look at what you said, it's like...really basic! Nothing all that advanced!
Why I never figured it out, I couldn't tell you....

Thanks a million for letting us know! I'm very happy now!!!

Sat Jun 9, 2007 Reply New Discussion

FirefoxRocks

Please note that the site mentioned in the original post have been removed. It was my site so I edited out the links to prevent link rot.

Sun Nov 2, 2008 Reply New Discussion

TavoxPeru

After some time finally i had the time to review my Internet Explorer and Firefox bookmarks files, and i found these websites related to this topic:

Vertical Centering in CSS Article that explains how to center an object with unknown height vertically within an area of a page.

Vertical Centering in valid CSS - Example
Vertical Centering in CSS - Example
Vertical and horizontal centering in valid CSS - Example

Max Design CSS Centering Article that shows two methods to center a containing block on a page using CSS based on whether your page layout is liquid or fixed width.

CSS Positioning Article that shows an overview of the methods and rules that govern visual rendering in CSS2.
I hope that it can be helpful for everybody.

Best regards,

Fri Nov 14, 2008 Reply New Discussion

Atomic0

It is not really pratical to use tables anymore in web design, since it has been succeeded by a more acceptable Cascading Style Sheets (CSS). I do recommend that you visit the tutorials in Post #9 for more info about centering in CSS.

Mon Nov 17, 2008 Reply New Discussion