Centering Div Tags using CSS

[PerlJamZ10]

I've been having a problem with trying to get my site centered properly. I have it set up so that everything is within div tags and positioned absolutely within the background image, and all the layers are nested within the main background image layer...basically everything will move as one. Now the problem I'm having...and believe me none of those "this is how you get your page centered and now add 'text-align: left;' cuz IE has a glitch and that fixes it" methods work. I searched online for about 5 hours to try and find a fix to this and tried many different CSS codes but my page either ALWAYS REMAINS bottom right-corner justified UNLESS i set the entire main layer to Top 0 and Left 0 which then makes the entire thing top left justified. No matter what I do I cannot get the damn thing centered...it's like by default it's always stuck in SOME corner and believe me I looked through all the settings of everything (unless I'm missing something) and nothing is set for left or right justification...even when set to centered it still justifies to the bottom right and i did nothing to the coding as i prefer to use the design mode. Please help!

[Setek]

It's because you have all your elements absolutely positioned, and not in the normal document flow. This is generally a very bad idea, but there's not much we can do about it now.

In future, absolutely positioning an entire website has the pro of pixel-perfecting a layout, but places many restrictions on the things you can do with the layout.

Now, there is one way you can fix this, which won't terribly affect the rest of your code:

1. Fix the width of the containing

   div

   , the element that surrounds every other element in your website (you can't center a website without it being a fixed width);
   
2. Set the left property to 50% - this will push your website to the center (from the top left-hand corner);
   
3. Set the margin-left property to minus-half-of-the-containing-

   div

   s-width, so if your width was 770px (just enough for 800*600 maximised resolution,) then you would set margin-left to be -385px;

And that should be that :)

Why does this work:
Because we're not trying to get something that's out of the document flow to be in it, we're just working within the already-out-of-the-document-flow system.

We're setting a left property to 50%, but this is calculated by the top-left edge - thus we need something to make it calculate it from the center...

So we set the margin-left to negative half of the width, and that's how it works ;)

[Fotiman]

...absolutely positioning an entire website has the pro of pixel-perfecting a layout...

But can often be destroyed when the user changes his/her font sizes. It depends on how things are positioned. I generally avoid absolute positioning for this reason alone.

[PerlJamZ10]

OK well I attempted ur method and unfortunately it did not work. When I apply the CSS with ur code it shoves everything to the bottom-right corner...so I now have to scroll to the right and bottom on my screen to view the page whereas I could view it normally with just up and down scrolling before(not cool). I did some tweaking to your code and was able to get the thing centered all around...However, when I switch to a higher resolution and expand the window, the page is stuck to the left side (and if i tweak it again to make up for that, any changes to the left side at all automatically shove the page to the right side). I am at a loss as to why this is not a simple task of centering the page in a predetermined window (kind of reminds me of the retartedness of InDesign not having an exact print preview...WHY?!?!?). BTW when I apply any kind of right side margin: if it is negative it shows up as overlapping the right side of my page (which is fine), but if it is positive it compeltely falls off the viewing area and is not even there, as if ONCE AGAIN my page is shoved to the right side of an invisible viewing space. Any help would be appreciated!

P.S.: If anyone knows of an external method of fixing this...such as external scripting that automatically reads the resolution of the viewer's screen and adjusts my website to fit that resolution...I would appreciate it if a link could be supplied.

[edited by: PerlJamZ10 at 7:04 pm (utc) on Dec. 20, 2006]

[Setek]

But can often be destroyed when the user changes his/her font sizes. It depends on how things are positioned. I generally avoid absolute positioning for this reason alone.

Definitely agreed, absolute positioning is like salt - don't use too much, but a little here and there is fine.

P.S.: If anyone knows of an external method of fixing this...such as external scripting that automatically reads the resolution of the viewer's screen and adjusts my website to fit that resolution...I would appreciate it if a link could be supplied.

PerlJamZ10, the point is that this shouldn't be necessary at all. There are thousands of centered CSS websites, which require very few lines of code.

Would you be able to post the CSS code that affects

html

,

body

, and the container

div

(the one that contains all your other elements)?

I get the feeling there's something interfering here, like your absolute positioning is ruining the methods for alignment.

What we may have to do is:

1. the centering fix with absolute positioning as described in my earlier post;
   
2. plus another

   div

   immediately within the main containing

   div

   , that also contains everything, that is set to position relative (with no other properties.)

And see whether that fixes it. But again, could we see the relevant code?

[PerlJamZ10]

I have posted the html for my entire page below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
width:1003px;
height:720px;
left: 180.5px;
top: 0px;
z-index: 1;
}
#Layer2 {
position:absolute;
width:148px;
height:77px;
z-index:1;
left: 306px;
top: 240px;
}
#Layer3 {
position:absolute;
width:355px;
height:90px;
z-index:2;
left: 536px;
top: 345px;
}
#Layer4 {
position:absolute;
width:144px;
height:57px;
z-index:3;
left: 750px;
top: 543px;
}
#Layer5 {
position:absolute;
width:944px;
height:144px;
z-index:4;
top: 1px;
left: 37px;
}
#Layer6 {
position:absolute;
width:274px;
height:534px;
z-index:5;
left: 9px;
top: 150px;
}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<script type="text/javascript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW ¦¦ innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<link href="The Website.css" rel="stylesheet" type="text/css" />
</head>

<body onload="MM_preloadImages('../Working Folder/images/INFO-ROLL.gif','../Working Folder/images/PORTFOLIO-ROLL.gif','../Working Folder/images/CONTACT-ROLL.gif')">
<div id="Layer1">
<div id="Layer6">
<div align="left"> <img src="../Working Folder/images/GRAPHIC-ARTIST_03.gif" width="274" height="534" /></div>
</div>
<div id="Layer5">
<div align="left"> <img src="../Working Folder/images/_03.gif" width="944" height="144" /></div>
</div>
<div id="Layer4">
<div align="left"> <a href="Contact.html"><img src="../Working Folder/images/CONTACT.gif" alt="contact" name="contact" width="144" height="57" border="0" id="contact" onmouseover="MM_swapImage('contact','','../Working Folder/images/CONTACT-ROLL.gif',1)" onmouseout="MM_swapImgRestore()" /></a></div>
</div>
<div id="Layer3">
<div align="left"> <a href="Portfolio-1-Eggs.html"><img src="../Working Folder/images/PORTFOLIO.gif" alt="portfolio" name="portfolio" width="355" height="90" border="0" id="portfolio" onmouseover="MM_swapImage('portfolio','','../Working Folder/images/PORTFOLIO-ROLL.gif',1)" onmouseout="MM_swapImgRestore()" /></a></div>
</div>
<div id="Layer2">
<div align="left"> <a href="Artist Info.html"><img src="../Working Folder/images/INFO.gif" alt="info" name="info" width="148" height="77" border="0" id="info" onmouseover="MM_swapImage('info','','../Working Folder/images/INFO-ROLL.gif',1)" onmouseout="MM_swapImgRestore()" /></a></div>
</div>
<div align="left"> <img src="MAIN-PAGE.gif" width="1003" height="720" /></div>
</div>
</body>
</html>

And here is the CSS that im working with. What is posted centers the image all-around on my normal resolution setting. When I change the resolution it still remains centered, but it's stuck against the left wall of the browser:

#Layer1 {
width: 720px;
height: 1003px;
margin-left: -180px;
margin-top: 250.75px;
margin-right: -180px;
margin-bottom: 501.5px;
}

[edited by: PerlJamZ10 at 11:12 pm (utc) on Dec. 20, 2006]

[Setek]

Umm... not exactly what I was trying to explain.

Okay, you have left and top properties set for pretty much all your inner elements, so this is what you have to do:

1. have another

   div

   inside

   Layer1

   that encompasses all your other

   div

   s also;
   
2. set it to position: relative; and
   
3. you'll need to change #Layer1 to be more like this:

   #Layer1 { width: 720px;
   left: 50%;
   margin-left: -360px; }

Just to make it clear, the

div

inside

#Layer1

will have to be:

#Layer1 div#inside-Layer1 { position: relative; }

And all your other

div

s will be inside

div#inside-Layer1

.

And again, for future reference, absolutely positioning an entire website is a bad idea :)

[PerlJamZ10]

OK what you mentioned suddenly enlightened me to the fact that just as I nested the smaller layers within the background image of Layer1, I could make my life a lot easier if I simply placed EVERYTHING within ANOTHER layer that would allow the entire site to have the flexibility that I was looking for with the smaller images. Wow I feel really dumb that I didn't realize it was such an easy fix before. I did what you said and placed everything within a global layer set to relative and now when I apply any kind of CSS coding it actually works properly. Now I just have to see if this works on a higher resolution, and if it does then thank you very much for being patient and helpful...if not I'll be back to describe my problem lol :p.