Centering a page

[designaweb]

Hello,

I have built a new site, but I was stupid enough not to check it in Mozilla while building it. So I ran into some problems when I did. One of them is the following.

The table that holds the actual page is 910 pixels wide. This table needs to be centered in the browser window. On the left of this table, I have a table that holds the background for the open space on the left of the actual content table, for users that are on higher resolutions. On the right hand side I have the same thing.

It all works well in IE, but in Mozzilla it simply does not center the content table :(

If the mods will allow it I can post the URL to this page, that makes it easier to have a look at it I think...

[tedster]

For a table-based layout you can nest the entire content table as the center cell in a 3 column container table. Cells 1 and 3 get width:50% and a &nbsp; for their content and you can assign those <td> your background image.

What is not clear to me is the mechanism that centers your current content table for IE. There may be an even simpler fix. Perhaps there is a small error that IE is ignoring but not Mozilla. Have you validated [validator.w3.org] the page?

[designaweb]

Hi Tedster,

Thanks for the help... I forgot to add in the 50% for each TD. And yes, I have validated my page.

By the way, what's the deal on percentages any way? I thought they were no good and you are supposed to use set values?

[tedster]

Percentage widths are certainly OK. They can come in very handy when you want your layout to be "liquid" and adapt to varying window sizes and screen resolutions. In a way, an always centered layout IS a kind of liquid layout, even if your content section itself is fixed width.

[encyclo]

You can also either use some of the CSS centering tricks from this thread [webmasterworld.com], or if you are using transitional markup, you can even dig out the trusy old

<center></center>

and place it outside the whole table - it's a far better option than nesting the table, IMO.

By the way, 910 pixels is very wide for a fixed-width layout. You will get sideways scrolling on monitors with an 800x600 resolution (depending on your audience, that can be 45% to 55% of your users), and those with higher resolution screens (like me) often don't have their browser open full-screen. Usually, a "safe" width for a fixed-width site is 760 pixels maximum.