trouble centering page with CSS

**CaptainPinko** · Feb 3rd, 2005, 01:04 AM

I've been working on a page for quite some time and I could never get my page dynamically centered (I'm using XHTML Strict), but then I found this ssite that was centered with CSS*. I noticed that it all seems to be centered with:

Code:

#holder {
    background: #fff;
    border: 1px solid #000;
    margin: 10px auto;
    width: 760px;
    /*position: absolute;*/
}

When I drop the comments from around the position statement the page fails to center. Now, the way my page is set-up (I can't post links since I was subcontracted at the last minute so while I did the best I could and it's decent... it's still not properly centered**) is that there is a lot of <div>s using position:absolute to line-up the images that are part of the decoration/content. Now all the tags are ultimately nested within a <div> that that encompasses all of the <body> and is id="page".

I've changed the style for page in the .css file to :

div#page{margin: 10px auto;}

and the page doesn't center!!

I realize that "absolute" breaks "margin" but "page" is now a top-level tag and it is not absolute. My understanding of using "absolute" is that it applies moving the container with respect to it's container, so that moving the parent container would move the child by the additional of the parent. In fact, I have a triple-nested div that works that way on the page (without and margin setting though). Does anyone have any suggestions?

I get this problem with both Firefox 1.0 and IE 6.0 and both my xhtml and css are standard compliant.

*Disclaimer: I'm not advocating the site or supporting it's content, mearly using it as an example.
**Actually, out of frustration I just statically centered it on the screen assuming browsing at 1024x800 using the fullscreen

**CornedBee** · Feb 3rd, 2005, 08:46 AM

The margin trick only works on objects that are in the flow. This means it won't work for position: absolute. Why do you need position: absolute?

Objects with position: absolute are positioned relative to their containing positioning context. A positioning context is started by any element that has a position value other than static.

If you need some random element in the flow to become a positioning context, give it position: relative.

**CaptainPinko** · Feb 3rd, 2005, 12:32 PM

Well the site contains a various adjacent images theat are supposed to align and the center image (kinda of like a 3x3 grid) gets replaced by various onmouseover events. As these images need to lineup (the are really just one image spread over a few .gif files-- I hate the design but it's what the customer wanted... or so I was told by the boss) I found it troublesome to line up the images up with position:relative having to substract 4px for each image to to compensate for image spacing and whatnot (the images need to be touching since the figure "flows" through them).

I also figured that position:absolute would be more consistent amongst browsers than position:relative since it leaves less to interpretation.

This is my first page ever with CSS since I usually do sererside programming but they needed someone on short notice.

**CornedBee** · Feb 3rd, 2005, 12:51 PM

What image spacing?

Code:

img { padding: 0; margin: 0; }

Can you show me a little schema of what you're trying to achieve?

**techgnome** · Feb 3rd, 2005, 01:40 PM

I had a similar issue.... it ceneterd in FF, but not in IE.... I found that, and this seems most rediculous..... margin: auto auto auto auto; worked.....

Also, sometimes cleaning out your cache helps. I had that happend to me a couple of times where the CSS got cached and no changes to it took.

Tg

**McCain** · Feb 3rd, 2005, 04:13 PM

If you have nine equally sized images that you want in a 3x3 pattern I would just create one big <div> to hold them all and then float the images.

Code:

img { 
    float: left; 
    margin: 0; 
    padding: 0;
}

**CaptainPinko** · Feb 4th, 2005, 12:52 AM

Originally Posted by McCain

If you have nine equally sized images that you want in a 3x3 pattern I would just create one big <div> to hold them all and then float the images.

Nope! The central image is huge and the remaining 8 are essentially border pieces. I'll try setting the spacing and padding to 0 (I don't know all the properties of CSS that I can set... I've just done the W3Schools CSS Tutorial, some trial and error, and what I've learned trying to validate).

If it doesn't work I'll brew up an example and post it here... if it does I'll let you guys know. Thanks for all the help so far.

**McCain** · Feb 4th, 2005, 01:08 AM

Well, I guess they don't have to be exactly the same size... Sorry, didn't think of this.
It should be enoug if:
* top-left, top, and top-right have the same height
* top-left, left, and bottom-left have the same width
* top-right, right, and bottom-right have the same width
* bottom-left, bottom, and bottom-right have the same height
* top and bottom are as wide as center
* left and right are as high as center

(All the above points would be met if it's just a center image with a simple frame/border around it)

If you put sizes in the <img>-tagg to make the images confirm to the above points I think that would work as well

Thread: trouble centering page with CSS

Thread Tools

Display

trouble centering page with CSS

Re: trouble centering page with CSS

Re: trouble centering page with CSS

Re: trouble centering page with CSS

Re: trouble centering page with CSS

Re: trouble centering page with CSS

Re: trouble centering page with CSS

Re: trouble centering page with CSS

Posting Permissions