Jump to content

Centering Webpage


soozyq
 Share

Recommended Posts

Hi All,I thought I had this cracked but I am obviously making a mistake somewhere. I wish to center a website on the screen no matter the size of the screen using autowide margins. The site in question is hereWhat am I doing wrong?Any help very much appreciated.ThanksSooz

Link to comment
Share on other sites

Hi All,I thought I had this cracked but I am obviously making a mistake somewhere. I wish to center a website on the screen no matter the size of the screen using autowide margins. The site in question is hereWhat am I doing wrong?Any help very much appreciated.ThanksSooz
First of all. i think its a beautiful site.if you give your container these CSS settings. it shouldt work:
#container {	margin-left: auto;	margin-right: auto;	width: 955px; /* Or wathever you need here, as long as there is a width*/}

This only works if your document have a doctype/mads

Edited by madsovenielsen
Link to comment
Share on other sites

First of all. i think its a beautiful site.if you give your container these CSS settings. it shouldt work:
#container {	margin-left: auto;	margin-right: auto;	width: 955px; /* Or wathever you need here, as long as there is a width*/}

This only works if your document have a doctype/mads

Hi Mads,Thanks for the quick response. I tried that and I still seem to have the same problem. I am wondering if I have put code elsewhere that is overwriting this. Sooz
Link to comment
Share on other sites

do as previously suggested, which is to put all your content in a container div. the add this to its CSS:

#container {  margin: 0px auto;  width: ???px;  //define a width or else it will automatically stretch the width of the page, thus rendering centering meaningless};

and regardless of what techniques you are using in a page, you should always have a Strict DTD'ed page that validates.

Edited by thescientist
Link to comment
Share on other sites

do as previously suggested, which is to put all your content in a container div. the add this to its CSS:
#container {  margin: 0px auto;  width: ???px;  //define a width or else it will automatically stretch the width of the page, thus rendering centering meaningless};

and regardless of what techniques you are using in a page, you should always have a Strict DTD'ed page that validates.

I have tried the following code but still no joy
#container {margin: 0px auto;    width: 850px;}

Link to comment
Share on other sites

The reason it's not working is because you're using absolute positioning for everything. :)You shouldn't use absolute positioning unless absolutely necessary. From the looks of your layout, I don't think you'll need it at all. Try positioning stuff with margins, padding, display, and float instead. (And make sure you're using a Strict DTD like scientist pointed out)EDIT:@scientist:There's a link in the first post...:)

Edited by ShadowMage
Link to comment
Share on other sites

The reason it's not working is because you're using absolute positioning for everything. :)You shouldn't use absolute positioning unless absolutely necessary. From the looks of your layout, I don't think you'll need it at all. Try positioning stuff with margins, padding, display, and float instead. (And make sure you're using a Strict DTD like scientist pointed out)EDIT:@scientist:There's a link in the first post...:)
at least I'm not the only one around here he doesn't always read the first post :)so yeah, ixnay on the positioning-ay, and use the techniques bossman SM suggested. With floats, margins, paddings, and the such, you shouldn't have any problems with centering the pages using the previous techniques suggested.
Link to comment
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
 Share

×
×
  • Create New...