Welcome to WebmasterWorld Guest from 54.226.183.49

Forum Moderators: not2easy

Message Too Old, No Replies

Centering method renders inconsistently

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

     

1337Mac

7:18 am on Mar 27, 2009 (gmt 0)

5+ Year Member



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

7:38 am on Mar 27, 2009 (gmt 0)

5+ Year Member



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

7:46 am on Mar 27, 2009 (gmt 0)

5+ Year Member



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

7:56 am on Mar 27, 2009 (gmt 0)

5+ Year Member



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

10:37 am on Mar 27, 2009 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

9:14 pm on Apr 4, 2009 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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 ;)

 

Featured Threads

Hot Threads This Week

Hot Threads This Month