homepage Welcome to WebmasterWorld Guest from 54.234.0.85
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Centering method renders inconsistently
Tried to center two DIVs with this method. One worked. The other failed.
1337Mac




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

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




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

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




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

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




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

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




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

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




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

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved