Centering an 80% Container DIV

Forum Moderators: not2easy

Message Too Old, No Replies

Centering an 80% Container DIV

MisterMaster

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

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

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

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

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

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