Topic: center a div that uses absolute positioning? Pages that link to <a href="https://ozoneasylum.com/backlink?for=22604" title="Pages that link to Topic: center a div that uses absolute positioning?" rel="nofollow" >Topic: center a div that uses absolute positioning?\

 
Author Thread
ShadowImage
Nervous Wreck (II) Inmate

From: Melbourne, Victoria, Australia
Insane since: Mar 2001

IP logged posted posted 07-18-2004 12:42 Edit Quote

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.

synax
Maniac (V) Inmate

From: Cell 666
Insane since: Mar 2002

IP logged posted posted 07-18-2004 16:40 Edit Quote

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)

Rinswind 2th
Maniac (V) Inmate

From: Den Haag: The Royal Residence
Insane since: Jul 2000

IP logged posted posted 07-18-2004 22:08 Edit Quote

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)

Lurch
Paranoid (IV) Inmate

From: Behind the Wheel
Insane since: Jan 2002

IP logged posted posted 07-20-2004 09:00 Edit Quote

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

code:
#container {
position: absolute;
left: 50%;
width: 400px;
margin-left:: -200px;
}




Rinswind 2th
Maniac (V) Inmate

From: Den Haag: The Royal Residence
Insane since: Jul 2000

IP logged posted posted 07-20-2004 22:04 Edit Quote

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

code:
.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



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu