How Can I Make My Site Appear Centered

**ivanmax** · November 15, 2006

Hi everybody,

Let´s see if somebody can give a hand with this...

I built a site about six months ago. I designed the site to be seen on a 17 inches screen (1024x768) and looks all right with that resolution but I have now realised that my site doesn´t appear centered with a 600x800 resolution or with the resolution for a 19 inches screen.

www.pedaldoc.com

This is a big problem for me because I suppose it makes me lose customers. I did the site using layers. Is there any way I can make my site centered for all the different screens and resolutions?

Please I would really welcome a hand...

Thanks to everybody in advance.

Iván

**btrfld** · November 15, 2006

Hi there, Ivan.

It's a simple enough thing to center your site.

Caveat: to fit on an 800x600 screen the content cannot be wider than 770 pixels. That leaves room for the Browser edges and the inevitable scrollbars.

First, define the body of the site as center aligned.

Next put a wrapper layer around everything, exactly the width of the site content.

Finally, define the wrapper as centered with respect to its parent.

Here is the relevant CSS:

body { text-align: center; }

div#wrapper { width: 770px; margin: 0 auto; }

and the HTML it affects:

<html>

. . .

<body>

[Your Content here]

</div>

</body>

</html>

Hope that helps.

**flashram** · November 15, 2006

Is this the same for where you want your site to display correctly on all different screen sizes.

Say you design a site and like me have a 22" monitor. But someone is using a 15" monitor so it would look wrong.

Some sites I see, can detect the size of the monitor and adjust the website to fit correctly on different monitor size/resolutions.

Like 800 x 600, 1280 x 1024 etc etc etc.

**abinidi** · November 16, 2006

Are you talking about vertical alignment (top to bottom on the screen), horizontal alignment (left to right on the screen), or both?

**flashram** · November 16, 2006

That would be both Paul. I was asked this question by someone who has a website that is in the large size screen and when people view his website on their say 15" montiors at 800 x 600 he says the website looks like s*** fill in the word.

**ivanmax** · November 17, 2006

Thanks a lot to everybody. I will spend some time studying your ideas and will try to put them in practice.

Thanks again to you all who help newcomers to the web design world. :tchrocks:

Iván

**carbonize** · November 19, 2006

The old fashioned way was to use a table with the relevant align="center" and valign="center" attributes where relevant.

Fixed width sites are going to become the norm before to long due to the increase in widescreens. I mean my stats show the avarage screen width is 1024 but there is still about 20% using 800px and about 18% using 1200px width. You could possibly make a site that looks good on all three when using a dynamic width but then you get widescreen monitors that would really stretch your pages look. I personally still design with 800x600 in mind and tend to fix the width at 760px but I will rethink this in the near future depending on my stats.

Edited November 19, 2006 by carbonize

**PeterPeter** · November 19, 2006

I agree with you Carbonize, but then there are those that like to stretch the envelope.

**ivanmax** · November 29, 2006

Hi,

Sorry for reopening this topic but I don´t manage to make my site appear centered. I am interested in it appearing centered mainly for 17, 19 and 21 inches resolutions. I have tried to make the body center aligned but I can´t .

Please help.

Thanks a lot,

Iván

**carbonize** · November 29, 2006

Put everything in a div then use CSS to set the divs width and then set it to margin: 0 auto;.

Sign In

How Can I Make My Site Appear Centered

Recommended Posts

ivanmax

btrfld

flashram

abinidi

flashram

ivanmax

carbonize

PeterPeter

ivanmax

carbonize

Join the conversation

Hosting