Center-align absolute positioned elements

Is it possible in IE6+NS7 to center-align a div of fixed width which
itself contains elements which use "position: absolute"?
Using "margin-left: auto" and "margin-right: auto" works well to center
something, but the absolute-positioned contents of the outside layer
will be stuck to the left of the window...!

Thanks a lot!
--
Google Blogoscoped
http://blog.outer-court.com

On 2 Nov 2004 17:41:13 GMT, Philipp Lenssen <info (AT) outer-court (DOT) com> wrote:

Is it possible in IE6+NS7

.... or in CSS in general...

to center-align a div of fixed width which
itself contains elements which use "position: absolute"?

margin: auto; will center the block.

Using "margin-left: auto" and "margin-right: auto" works well to center
something, but the absolute-positioned contents of the outside layer
will be stuck to the left of the window...!

Yes, the margins are taken into account.

A workaround is to nest divs. The CSS for the following should be obvious.

<div class="relativemarginauto">
<div class="wraprelativenomargin">
<p>Content will be positioned to the inner div, which has no margin.</p>
</div>
</div>

Neal wrote:

On 2 Nov 2004 17:41:13 GMT, Philipp Lenssen <info (AT) outer-court (DOT) com
wrote:


margin: auto; will center the block.

Using "margin-left: auto" and "margin-right: auto" works well to
center something, but the absolute-positioned contents of the
outside layer will be stuck to the left of the window...!

Yes, the margins are taken into account.

Thanks, but I tried, and it didn't work -- can you help?
Here is a sample. As the outer div is not absolutely positioned, it
seems both Firefox and IExplorer have the same behavior of ignoring the
centering for the absolute positioned contents.
http://outer-court.com/temp/sample/

Philipp Lenssen wrote:

Neal wrote:

On 2 Nov 2004 17:41:13 GMT, Philipp Lenssen <info (AT) outer-court (DOT) com
wrote:
margin: auto; will center the block.

Using "margin-left: auto" and "margin-right: auto" works well to
center something, but the absolute-positioned contents of the
outside layer will be stuck to the left of the window...!

Yes, the margins are taken into account.

Thanks, but I tried, and it didn't work -- can you help?
Here is a sample. As the outer div is not absolutely positioned, it
seems both Firefox and IExplorer have the same behavior of ignoring the
centering for the absolute positioned contents.
http://outer-court.com/temp/sample/

Absolutely positioned elements are positioned relative to the next
*positioned* element up in the tree - since your containing block
doesn't have any position, this defaults to the body. Applying position:
relative to #content will give it position, without moving it.

There are still problems with the fact that you've given the #navi and
#maintext elements heights greater than #content, but this should put
you on the right track.

P

Phil Evans wrote:

Philipp Lenssen wrote:


Thanks, but I tried, and it didn't work -- can you help?
Here is a sample. As the outer div is not absolutely positioned, it
seems both Firefox and IExplorer have the same behavior of ignoring
the centering for the absolute positioned contents.
http://outer-court.com/temp/sample/

Absolutely positioned elements are positioned relative to the next
positioned element up in the tree - since your containing block
doesn't have any position, this defaults to the body. Applying
position: relative to #content will give it position, without moving
it.

This works great and solved my problem. Thanks a lot!

--
Google Blogoscoped
http://blog.outer-court.com