Centering method renders inconsistently

Tried to center two DIVs with this method. One worked. The other failed.

[1337Mac]

I'm trying to center two divs and the first one centers just fine, but the second one is slightly off-center. And it's not a browser-specific problem either.

I am using the centering method where you position the div 50% from the left of the page and then nudge it back by half of its pixel width.

I can't use the "auto" method for centering in this case because it is an absolutely positioned div. If I can't get this to work in CSS my only option will be to use the CENTER tag in HTML.

Here's the markup:

#globalNav {
background-image: url(images/dm-nav-bar.png);
background-repeat: no-repeat;
padding: 0px;
height: 159px;
width: 1000px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
position: absolute;
top: -24px;
overflow: hidden;
z-index: 2;
left: 50%; /* For centering */
margin-left: -500px; /* For centering */
}

#content {
position: absolute;
background-color: #6f8489;
background-repeat: repeat;
padding: 12px;
width: 936px;
border: 1px solid #000000;
top: 0px;
z-index: 1;
left: 50%; /* For centering */
margin-left: -468px; /* For centering */
}

Any ideas?
Could it be a doctype issue?

[1337Mac]

Update: the problem was the padding I applied to the #content div.

But I don't understand why. It should have padded the div equally from all directions, not moved it off-center.

[1337Mac]

In short, this is still a problem for me, since it seems I have no way of adding padding to the left or right sides of my #content div without it breaking the centering.

[1337Mac]

OK, I figured it out. It factors in the padding when centering.

To compensate for the 12px of padding I added 12px to the left margin.
So now instead of -468px it is -480px.

Yay. Case solved.

[swa66]

There is another way to center absolutely position block elements:

.widget {
 position: absolute;
 padding: 12px;
 width: 936px;
 margin-left: auto;
 margin-right: auto;
 left: 0;
 right: 0;
}

Unfortunately legacy IE versions have trouble with it, but it you use scripted help to fix their issues somewhat it can work there too (e.g. IE7.js fixes it)

[SuzyUK]

OK, I figured it out. It factors in the padding when centering.

To compensate for the 12px of padding I added 12px to the left margin.
So now instead of -468px it is -480px.

Yay. Case solved.

Congrats!.
you're not compensating, it's the Box Model (CSS101!)
actual width = content width + padding + borders

You figured it out, as you said :) The margin auto method (swa's post) will work going forward too.

When left and right co-ordinates are both supported together in IE, all will be well, until then it's box model basics ;)