Centering a Page with CSS - Problem will Pay $$

**rosem** · Mar 16, 2005, 13:28

Alright, so I've been doing CSS for a while now, but this is really starting to get to me.

I've centered sites before with this method :

http://www.simplebits.com/notebook/2...centering.html

But I can't seem to get my current site to do it. If I have the postion of my boxes set to "absolute" will that not allowing that centering method to work?

Any help would be apreshiated, I can post my code, or you can message me on AIM - I'll pay some $$ paypal if you help me out

AIM: rosemFSU

Thanks,
Mike

**Paul O'B** · Mar 16, 2005, 13:44

Hi,

Theres a full explantion of centering in the FAQ and also an explanation of how to centre an existing site that was centred already.

It's pretty simple and all you need do is find the width of your existing page and apply a wrapper of that width and use the usual centering methods as in the article and in the FAQ.

The only extra thing you need is to apply position:relative to the surrounding wrapper so that any absolute elements in the page will now take their parent to be this new centred wrapper and not the viewport. This means the absolute elements will stay in relation to the top left corner of the wrapper no matter where it moves as the page is resized.

You shouldn't mention money in this forum as help here is free. If you want paid help you can post in the sitepoint marketplace forums once you have read the guidelines

**Kravvitz** · Mar 16, 2005, 13:46

Absolutely positioned elements are removed from the flow.

If you must use absolute positioning and elements have fixed widths you can set left:50% and then use a negative left margin of half the element's width to center them,

**rosem** · Mar 16, 2005, 14:01

Paul,

I did what you said about the wrapper (I named it "container" however

) do you care to have a look at my code and see what I'm doing wrong?

That would help me out quite a bit.

Thanks,
Mike

ALSO, Thanks for the fast reply everyone!

**Paul O'B** · Mar 16, 2005, 14:37

Can you post the code or a link and I'll take a look.

Absolutely positioned elements are removed from the flow.

Thats true but they are also absolutely placed in relation to their parent. Therefore setting the parent to relative will keep the layout intact (unless the layout is not left aligned of course then there will be nothing to centre).

**rosem** · Mar 16, 2005, 15:39

http://www.rosem.com/work/random/css_test.zip

Have a look, and let me know

Thanks,
Mike

**BonRouge** · Mar 16, 2005, 16:05

As Paul said, your container should be position:relative. When you do that, you'll find that your page is not exactly centred but a little to the right of centre. That's due to the numbers you've used for your absolute-positioned divs.

**rosem** · Mar 16, 2005, 17:28

is there any way to get it right dab in the center?

**Paul O'B** · Mar 16, 2005, 17:29

Hi,

As Bon Rouge said you have offset your page by 50px ao that becomes part of the centering. You can change all your left positions by 50px less or you can trick the browsers with a negative position as follows.

Code:

#container {
margin: 0 auto;
width: 710px;
text-align: left;
position:relative;
left:-50px
}

That should counteract the positioning if you can't be bothered to change all the absolutes

**rosem** · Mar 16, 2005, 17:32

AHHHH.... It all just clicked now

Before you posted that I went back and changed all the position-left's back to 0 instead of 50. So both methods will work...

What one is "better" or more correct. The way I did it, or your way?

**Paul O'B** · Mar 16, 2005, 17:53

Best to have them set to zero as you know where you are now. If you had millions of them in the page then you could have used my method to make life easier

**yaip** · Mar 25, 2005, 16:07

I am having a similiar situation. I want to set set a background color. So I have my CSS as:

body
{
text-align: center;
background-color:Gray;
}
#container_2
{
margin: 0 auto;
width: 950px;
text-align: left;
}

This is not working. Why?

**BonRouge** · Mar 25, 2005, 16:17

I don't really see how this is similar, but... maybe it's the capital 'G' you have. CSS properties and values are all lower-case.

**Kravvitz** · Mar 25, 2005, 16:25

Try using the hex color.

Code:

body
{
text-align: center;
background-color: #808080;
}
#container_2
{
margin: 0 auto;
width: 950px;
text-align: left;
}

**yaip** · Mar 25, 2005, 16:38

Originally Posted by BonRouge

I don't really see how this is similar, but... maybe it's the capital 'G' you have. CSS properties and values are all lower-case.

The reason I said it was similar because I started off by wanting to center my page (which works) and I wanted to extend it by having a background-color (which doesn't work).

BTW, I also tried small g, but no luck.

**yaip** · Mar 25, 2005, 16:39

Originally Posted by Kravvitz

Try using the hex color.

Code:

body
{
text-align: center;
background-color: #808080;
}
#container_2
{
margin: 0 auto;
width: 950px;
text-align: left;
}

Even hex color doesn't work.

**BonRouge** · Mar 25, 2005, 16:47

Sorry I didn't read your mind and see the tangential relationship between this thread and your background colour.

You 'll have to show us your page - what you have there should work.

**yaip** · Mar 25, 2005, 17:24

Code:

        
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><link href="../Icons/favicon.ico" rel="SHORTCUT ICON"><link href="PSS.css" rel="stylesheet" type="text/css"><title>
</title><link rel="stylesheet" href="../Themes/Basic/CA_StyleSheet.css" type="text/css" /><link rel="stylesheet" href="../Themes/Basic/PSS.css" type="text/css" /><link rel="stylesheet" href="../Themes/Basic/StyleSheet.css" type="text/css" /></head>
<body>
    <div id="container_2">
    <form method="post" action="default3.aspx" id="__aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" value="OwXpEZh1FUntQLKJeH2WtiCnKOGA6JvXXqbtDt3UkNws/lnFl2SqkAEhFatP6P/+" />
</div>

    
    <div style="font-size:10pt; font-family:Verdana;">

    Welcome to Default3.aspx. To access the application, please
    <a id="ctl00_ContentPlaceHolder1_HyperLink1" href="Default4.aspx">click here</a>.
        </div>

    </form>
    </div>
</body>
</html>

**Melter** · Mar 26, 2005, 11:16

Won't adding background-color:transparent to container_2 solve this?

**BonRouge** · Mar 26, 2005, 11:21

I haven't had time to look at this properly, but I think the form might be more of a problem than the second div. Maybe background:transparent on the form id...

**Kravvitz** · Mar 26, 2005, 11:47

yaip has 4 CSS files linked there. It seems to me the problem might be that the color is set in one and overridden in another.

**BonRouge** · Mar 26, 2005, 11:52

Didn't spot that (I said I hadn't looked at it properly)...

Yeah, it's probably that, isn't it?

**yaip** · Mar 26, 2005, 12:05

I think you are right. I didn't realize that till I did a View->Source in my browser. I am using ASP.NET and was not aware what the server generated.

I fixed this by doing a ! IMPORTANT for the color attribute.