absolute positioning

Hello,

i have a <div id="main"> container that i want to be centered on the
browser-window.
so i gave it margin:0px auto;
everything fine.

now i want a second container positioned absolute in the <div id="main">,
not in the browser-window.
not possible, because <div id="main"> has no position:absolute;.

if i give <div id="main"> the position:absolute; , it is not longer centered
in the browser-window.
but it should be centered also if someone resizes the window.

Any workaround for that?

Thanks for any idea,
Martin Nadoll

Martin Nadoll wrote:

Hello,

i have a <div id="main"> container that i want to be centered on the
browser-window.
so i gave it margin:0px auto;
everything fine.

now i want a second container positioned absolute in the <div
id="main">, not in the browser-window.
not possible, because <div id="main"> has no position:absolute;.

if i give <div id="main"> the position:absolute; , it is not longer
centered in the browser-window.
but it should be centered also if someone resizes the window.

Any workaround for that?

#main {position: relative;}

On 2009-04-11, Martin Nadoll <martin (AT) nadoll (DOT) de> wrote:

Hello,

i have a <div id="main"> container that i want to be centered on the
browser-window.
so i gave it margin:0px auto;
everything fine.

now i want a second container positioned absolute in the <div id="main">,
not in the browser-window.
not possible, because <div id="main"> has no position:absolute;.

if i give <div id="main"> the position:absolute; , it is not longer centered
in the browser-window.
but it should be centered also if someone resizes the window.

Any workaround for that?

If you want to center an absolutely positioned div, you need to set left
and right both to 0 (and then left and right margins to auto, as you
have done).

e.g.

#main
{
left: 0;
right: 0;
margin: 0 auto;
}