Topic: center a div that uses absolute positioning? (Page 1 of 1)

Hi,

I like using absolute positioning for layers because I find it easier to position a floating menu on the left.

What I want to do, is to position everything inside a "container" layer, which will only by 670px wide. This "container" layer, would have to use absolute positioning.

I wanted to know, is if there is an easy way to center this "container" layer? i.e. so that the page looks centered without having to use javascript.

Thanks for your help.

How do I get vertical and horizontal centering with CSS?

"Nothin' like a pro-stabbin' from a pro." -Weadah

(Edited by synax on 07-18-2004 16:41)

I have a some very rough examples for you using an very basic techique. The center content goes in an container div or span so does the content to the right and to the left.

See:
http://www.xs4all.nl/~rinswind/3columns-span.html
and
http://www.xs4all.nl/~rinswind/3columns-div.html
In the example both left and right position are set. Set them to the same value and the center dive will be in the middle.

------------------------------
Support Justice for Pat Richard

(Edited by Rinswind 2th on 07-18-2004 22:14)

I've found this to work rather well... You just set the width of the container div, then set the position (left) to 50%. That puts the left hand edge of the div in the center. Now pull it back half of the width of the div and you're at center

#container {

  position: absolute;

  left: 50%;

  width: 400px;

  margin-left:: -200px;

}

Some browser don't like the negative margin though and it looks like an ugly hack...
and how about scaling?
My solution would be:

.center{ 

position: absolute;

left: 33%;

right: 33%;

min-width: 32%;  //to keep the container open when there is no (or not enough) content.

}

Both left and right can adjusted at will. If the center element is the biggest you could set the left and right to 25% then the center will use half the screen. I guess this should also work with tables or p elements but i need to do some experimenting with it.
Maybe your solutions is better in the real world i don't know.

------------------------------
Support Justice for Pat Richard