Jump to content
xisto Community
FirefoxRocks

Centering The Page Like MSN.com and some other sites

Recommended Posts

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://forums.xisto.com/no_longer_exists/ and as you would probably guess, my site is at (Gone, this was MY site - 404)http://forums.xisto.com/no_longer_exists/

 

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 :)

Edited by FirefoxRocks (see edit history)

Share this post


Link to post
Share on other sites

I use

<center>

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

This is part of the changes I've done
......<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)
Edited by faulty.lee (see edit history)

Share this post


Link to post
Share on other sites

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:

Share this post


Link to post
Share on other sites

I don't think "center" is a valid XHTML tag :) It's even more "outdated" than the align="center" solution I mentioned :ph34r:

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

Share this post


Link to post
Share on other sites

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.

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

Share this post


Link to post
Share on other sites

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://forums.xisto.com/no_longer_exists/ and as you would probably guess, my site is at http://forums.xisto.com/no_longer_exists/
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 :)

Hi, can you try to use the margin property setting to 0 auto, i use the following css code to center a page:
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,

Share this post


Link to post
Share on other sites

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!!! B)

Share this post


Link to post
Share on other sites

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,

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.