homepage Welcome to WebmasterWorld Guest from 54.205.241.107
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
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

5+ Year Member



 
Msg#: 3879926 posted 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

5+ Year Member



 
Msg#: 3879926 posted 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

5+ Year Member



 
Msg#: 3879926 posted 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

5+ Year Member



 
Msg#: 3879926 posted 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

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



 
Msg#: 3879926 posted 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

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



 
Msg#: 3879926 posted 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