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

CSS Forum

    
Centering an 80% Container DIV
MisterMaster




msg:4401699
 2:38 pm on Dec 27, 2011 (gmt 0)

I'm trying to center a container div at 80% page width. The problem is that it's displaying the container a little to the right, so it's not centered on the page.

I can fix it with padding-right but the problem is that some browsers push the divider more to the left when they read this padding.

My code:

#container {
width: 80%;
min-width:200px;
max-width: 1260px;
position: relative;
font-size: 1em;
text-align:center;
background: #ffffff url(../images/content-top.jpg) repeat-x;
}

 

penders




msg:4401724
 5:15 pm on Dec 27, 2011 (gmt 0)

The problem is that it's displaying the container a little to the right...


Not to the left? The CSS you have posted does not appear to center the container at all, so I would expect it to appear hard left?

To center the container you would need to add
margin: 0 auto; (or similar) in order to set the left/right margins to auto. This then appears centered for me.
MisterMaster




msg:4401728
 5:33 pm on Dec 27, 2011 (gmt 0)

Oh ok it's centered even without the margin auto when theres no images involved. The problem is that I have images making up the borders of the container.

The images are rounded corners with outer glows, and the background is a gradient. So the images include the background.

My border images:

1. Top of container, 1px wide repeated across x axis
2. Left and right of container, each include the top corner and go down until the gradient stops
3. A repeated 1px tall image for the left and right sides of the container
4. Bottom-right and bottom-left corner images
5. A repeated bottom image, 1px wide repeated across x axis

It would be much easier if I could just show you the link but isn't that against the rules on this forum?

penders




msg:4401730
 5:53 pm on Dec 27, 2011 (gmt 0)

The problem is that I have images making up the borders of the container.


Presumably these background border images are in additional elements inside your #container element? Are these postioned OK?

alt131




msg:4401755
 7:00 pm on Dec 27, 2011 (gmt 0)

Hi MisterMaster and welcome to WebmasterWorld :),

Yes, posting links is against the rules for the reasons explained in the posts pinned to the top of the forum, and the sticky mail I have just sent. Thank you for respecting the forum policy and helping to make WebmasterWorld a stronger community.

Ok, back to code. I think the first issue is to understand the behaviour of the div with the background images.

As penders has identified, on the provided code it should not be centred. If it is centred as you say, there is something else affecting it, and that may also be causing the unequal margins once the images are added.

So first examine what is affecting the div. For example, have you set text-align:center and/or a padding on the parent?

Second, which browsers and versions are pushing the div across? This is important because legacy versions behave differently to modern versions, and the cause and solution may need to be different. Finally, can you confirm you are using a full doctype.

MisterMaster




msg:4401767
 7:24 pm on Dec 27, 2011 (gmt 0)

My doc type:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


I am testing it on Firefox and IE9 on two different screen resolutions.

#container is the parent and inside of it is:

#content-top
#content-top-right
#content-top-left
#content-inside
#content-inside2
#content-bottom-left-corner
#content-bottom-right-corner
#content-bottom

#container is 80% page width with margin: 0 auto and text-align:center

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