Adapting for Larger Screen Resolutions

[brockp17]

I've set my website to be 1024 pixels wide, but if it is viewed on a screen with a resolution larger than that, it stays on the left side of the screen with a wide white margin on the right. Does anyone know how I can center the page with "filler" space on the left and right so it will look better on higher resolution screens? Some good examples are pgatour.com and nfl.com. Also, I would want it so that the "filler" margins won't even show on 1024 pixel wide or smaller screens-- just like the example websites that I gave. Thanks!

 

[jnjc]

You need to center your main content div.

something like this in your CSS

#MainDiv {
margin:0 auto;
text-align:center;
}

If you post a link to your site I can give you more detailed information.

HTH,
JC

 

[sheanhoxie]

Yea, center your div by using margin: auto and text-align: center (make sure you reset the text-align to left in your containing div though or else your entire page text will be centered!). Then just set a repeating background for your body using css like this:

body {background-image: url('image.png'); background-repeat: repeat;}