How do I center my website???

[jabulani]

Hi, I designed my first website using Dreamweaver CS3 and centered it using guides. When I preview it in Firefox on my PC it looks roughly centered. However, when I view my site using internet explorer or on older computers the site is all to the left hand side. How can I ensure that the site is centered on all computers and on all browsers?n

[newseed]

Typically, you would have a div wrapped around the entire code and give it margin: auto to align it to the middle or center.

 

div#wrap { margin: 0 auto;}

 

Of course there are other possible issues if this doesn't work in which we will then need to look at the site itself.

[jabulani]

Thanks,

I'll try this and see if it works.

[jabulani]

I tried copying and pasting this code div#wrap { margin: 0 auto;} on my pages in code mode but it didn't work. Should I have done something different with the code...is there a specific place to put the code?

[newseed]

No offence but you might to post the url because what you may have might have some serious issues where the code I provided will not work. However, to answer you question, basically add this div#wrap { margin: 0 auto;} to the css file and then in the HTML you would add the following at the beginning and the end of the body code:

 

 

all other html code between here

 

[varun21]

thanks for suggestion.

[NuCoder]

Newseed is correct. You may also try:

 

#wrapper {

 

position: relative;

margin: 0 auto;

 

}

[Andrea]

You don't need a position relative to just center a layout.

[NuCoder]

hmm...Thank you Thelma

[Dragon]

Typically, you would have a div wrapped around the entire code and give it margin: auto to align it to the middle or center.

 

div#wrap { margin: 0 auto;}

 

Of course there are other possible issues if this doesn't work in which we will then need to look at the site itself.

Why div#wrap and not just #wrap ?

Also, how is this different from .wrap ?

 

Many thanks!

[Andrea]

Why div#wrap and not just #wrap?

The first is more specific than the second, but in execution, it won't make a difference.

Also, how is this different from .wrap?

The '#' is for ID and the '.' is for class. You'd use .wrap if the html was

- and you use IDs for things that only appear ONCE per page, classes for things that appear more than once.

[jabulani]

I certainly appreciate all the feedback and suggestions. However, I am more confused now than when I first started.

I guess it would be really helpful if I provide the url: www.geralddavidson.com

Once again I am very new at this and often don't understand some of the web design lingo...so please be patient and basic.

 

Thank you much!

[Wickham]

I did what Newseed said in his first post, and a bit more.

 

To be honest, the code is a mess, too many divs and lots of position: absolute and lots of left positions which stop it from centering.

 

I added a wrap div

just after the

.........

.............

 

and the

closing div just before the tag:-

............

 

and revised all the styles like this:-

 

<br /><!--<br />body {<br />    background-color: #FDE442;<br />}<br />#apDiv1 {<br />    position:absolute; <br />    /*left:300px;*/<br />    top:-4px;<br />    width:800px;<br />    height:1257px;<br />    z-index:1;<br />    background-color: #FFFFFF;<br />}<br />#apDiv2 {<br />    position:absolute; <br />    /*left:279px;*/<br />    top:1px;<br />    width:800px;<br />    height:71px;<br />    z-index:2;<br />}<br />#apDiv3 {<br />    position:absolute;<br />    /*left:300px;*/<br />    top:73px;<br />    width:800px;<br />    height:179px;<br />    z-index:3;<br />}<br />#apDiv4 {<br />    position:absolute; <br />    /*left:300px;*/<br />    top:248px;<br />    width:800px;<br />    height:22px;<br />    z-index:4;<br />    background-color: #233C77;<br />}<br />#apDiv5 {<br />    position:absolute;<br />    left:201px;/*501px;*/<br />    top:402px;<br />    width:400px;<br />    height:732px;<br />    z-index:5;<br />}<br />#apDiv6 {<br />    position:absolute;<br />    left:234px;/*534px;*/<br />    top:1148px;<br />    width:335px;<br />    height:40px;<br />    z-index:6;<br />}<br />.style1 {<br />    font-family: Arial, Helvetica, sans-serif;<br />    font-size: 12pt;<br />}<br />.style2 {font-size: 10pt}<br />--><br />
<br /><!--<br />function MM_preloadImages() { //v3.0<br />  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();<br />    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; <br /><br />i<a.length; i++)<br />    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}<br />}<br /><br />function MM_findObj(n, d) { //v4.01<br />  var p,i,x;  if(!d) d=document; <br /><br />if((p=n.indexOf("?"))>0&&parent.frames.length) {<br />    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}<br />  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) <br /><br />x=d.forms[i][n];<br />  for(i=0;!x&&d.layers&&i<d.layers.length;i++) <br /><br />x=MM_findObj(n,d.layers[i].document);<br />  if(!x && d.getElementById) x=d.getElementById(n); return x;<br />}<br /><br />function MM_nbGroup(event, grpName) { //v6.0<br />  var i,img,nbArr,args=MM_nbGroup.arguments;<br />  if (event == "init" && args.length > 2) {<br />    if ((img = MM_findObj(args[2])) != null && !img.MM_init) {<br />      img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;<br />      if ((nbArr = document[grpName]) == null) nbArr = document[grpName] <br /><br />= new Array();<br />      nbArr[nbArr.length] = img;<br />      for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) <br /><br />{<br />        if (!img.MM_up) img.MM_up = img.src;<br />        img.src = img.MM_dn = args[i+1];<br />        nbArr[nbArr.length] = img;<br />    } }<br />  } else if (event == "over") {<br />    document.MM_nbOver = nbArr = new Array();<br />    for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {<br />      if (!img.MM_up) img.MM_up = img.src;<br />      img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? <br /><br />args[i+1] : img.MM_up);<br />      nbArr[nbArr.length] = img;<br />    }<br />  } else if (event == "out" ) {<br />    for (i=0; i < document.MM_nbOver.length; i++) {<br />      img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn <br /><br />: img.MM_up; }<br />  } else if (event == "down") {<br />    nbArr = document[grpName];<br />    if (nbArr)<br />      for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; <br /><br />img.MM_dn = 0; }<br />    document[grpName] = nbArr = new Array();<br />    for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {<br />      if (!img.MM_up) img.MM_up = img.src;<br />      img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;<br />      nbArr[nbArr.length] = img;<br />  } }<br />}<br />//--><br />

<br /><!--<br />#apDiv7 {<br />    position:absolute;<br />    left:169px;/*469px;*/<br />    top:301px;<br />    width:402px;<br />    height:72px;<br />    z-index:7;<br />}<br />#apDiv8 {<br />    position:absolute;<br />    left:548px;/*848px;*/<br />    top:402px;<br />    width:160px;<br />    height:600px;<br />    z-index:8;<br />}<br />#apDiv9 {<br />    position:absolute;<br />    left:548px;/*848px;*/<br />    top:402px;<br />    width:160px;<br />    height:600px;<br />    z-index:8;<br />}<br />#apDiv10 {<br />    position:absolute;<br />    left:145px;/*445px;*/<br />    top:1230px;<br />    width:468px;<br />    height:60px;<br />    z-index:8;<br />}<br />#apDiv11 {<br />    position:absolute;<br />    left:305px;/*605px;*/<br />    top:1205px;<br />    width:150px;<br />    height:22px;<br />    z-index:9;<br />}<br />#apDiv12 {<br />    position:absolute; <br />    /*left:300px;*/<br />    top:-2px;<br />    width:751px;<br />    height:64px;<br />    z-index:8;<br />}<br />#apDiv13 {<br />    position:absolute; <br />    /*left:300px;*/<br />    top:0px;<br />    width:801px;<br />    height:72px;<br />    z-index:9;<br />}<br />#wrap { width: 801px; margin: auto; position: relative; }<br />.style6 {font-size: 10px}<br />.style7 {font-family: Arial, Helvetica, sans-serif}<br />.style8 {<br />    font-size: 16px;<br />    font-weight: bold;<br />    font-family: Georgia, "Times New Roman", Times, serif;<br />    font-style: italic;<br />}<br />.style9 {font-size: 14px; color: #233C77; font-family: Arial, Helvetica, <br /><br />sans-serif;}<br />.style10 {font-size: 14px; color: #233C77; font-family: Georgia, "Times <br /><br />New Roman", Times, serif;}<br />#apDiv14 {<br />    position:absolute;     /*left:300px;*/<br />    top:1266px;<br />    width:801px;<br />    height:14px;<br />    z-index:10;<br />}<br />.style11 {font-size: 12px}<br />--><br />

 

I deleted all left: 300px; and reduced all left sizes that were over 300px by 300px but you will probably still have to revise these edits, but it now centers in IE7 and Firefox.

Edited May 13, 2009 by Wickham

[whatpapertiger]

Hi- I aslo have a question in regards to this.

 

I have been working on a website and have been testing it- and I have a double window frame:

 

www.uoregon.edu/~tpurkers

 

and I am tying to figure out how to center the table (which is divided into two in the middle.)- but it seems only the right side wants to adjust.

 

was curious as how to go about this. I tried to follow the post above me, but kept running into walls.

 

Thanks,

Edited May 23, 2009 by whatpapertiger

[Stormz]

First, create a container box, to put all of your content into (all the other divs.... nav, sidebar, main, footer etc):

 

 

Then create the css:

 

#container {
   width: 976px;
   margin:0px auto;
   text-align:left;
   padding:15px;
   border:1px dashed #333;
   background-color:#eee;
}

 

the main thing is that after you've given the container a width, then the "margin:0px auto;" and "text-align:left;" bits are what makes the site auto-center. the padding, border, color are not needed to auto-center, but help you see where the container box is.

[Andrea]

the main thing is that after you've given the container a width, then the "margin:0px auto;" and "text-align:left;" bits are what makes the site auto-center.

Not quite accurate - the text-align: left has nothing to do with centering. It's a left-over from the old ways of centering things for older IE versions, where you'd text-align center the body and then left-align the container to get things back to left-align.