My site is designed for 1024x768 Resolution.

However, I also want it to look the same at higher resolutions, such as 1280x1024.

The site sections have a top banner (centered) and then various columns and content that flow underneath.

An example is here: http://www.fudomouth.net/intertext/openmouth.htm

At 1024x768 the content is perfected bounded by the browser window. However, at 1280x1024, the content spills out to both sides beneath the banner.

To prevent this from happening, I've implemented "max-width: 1024px" in the "body" css.

This works brilliantly at bounding the content beneath the banner for those higher resolutions, except for one problem: the bounded content is now all aligned to the left of the browser window (at higher resolutions)!!

I'm sure there's a css command that can be used in conjunction with max-width to ensure that the total content is always centered. Anybody know what that would be?

My text description may be difficult to understand, so here are two screenshots showing the issue.

Basically, how do I get total page content with a max-width to be centered in the browser frame??








Any help appreciated!! Thanks thanks!!

See:
http://dorward.me.uk/www/centre/
http://www.w3.org/Style/Examples/007/center.html
http://css-discuss.incutio.com/?page=CenteringBlockElement

Thanks so much -- those links were really helpful. For others who are curious, I settled on the following css attributes in the "body" of the page:

max-width: 1024px;
margin-left: auto;
margin-right: auto;

This does the trick, and is the simplest of the available options. However, "max-width" isn't recognized by IE 6 and below. I can live with that. You can also use "width" for more cross-browser compatibility, but this will fix the width at all resolutions.