Center wrapper with position:absolute

[Lorel]

I'm using a wrapper with position:absolute; with the header, byline, twitter logo, menu and a slideshow all within the wrapper and those are all position:relative; and they all move as the wrapper moves however I can't get the wrapper to center on the page so everything is centered as the browser window gets wider. I have everything else on the page within a container below the wrapper.

Can someone tell me why this wrapper won't center itself? i've tried several different methods of centering but nothing works. The CSS and HTML validate.

Here is the CSS:

/*to contain header menu slideshow and twitter*/
#wrapper {position:absolute;
top:25px;
left:auto;
right:auto; }

/*Slideshow is inside header on hm pg only*/
#header { position:relative;
width:960px;
height:98px;
border:1px solid #ffffcc; }

.byline {font-size:14px;
font-weight:bold;
font-style:italic;
color:#99ccff;
margin:-17px 0 0 5px;
font-family: Arial, sans-serif; }

.twitter {
position:relative;
top:-53px;
left:795px;
width:160px;
z-index:10; }

/*position absolute won't work due to pg centered */
#slideshow { position:relative;
width:475px;
height:300px; /*same height n width as images*/
top:107px;
left:255px;
margin:0;
background:#ffffff;
border:1px solid #666666; }

Here is the HTML:

<div id="wrapper">

<div id="header">
<a href="/"><img src="images/logo16.jpg" width="960" height="98" border="0" alt="#######"></a>
<div class="byline"><i>Blah Blah Blah</i>
</div>

<!-- Horiz Menu -->
<div class="menu">
<table cellspacing="0" cellpadding="0" id="menu1" class="dm1" border="0">
<tr><td>
Blah Blah Blah
</td></tr></table>

<div id="slideshow">
Blah Blah Blah
</div>
</div><br class="clearboth">
</div> <!-- EndHeader -->
<a href="http://twitter.com/########"><img src="images/twitter1.gif" width="160" height="27" border="0" alt="twitter logo" class="twitter"></a>
</div> <!-- end wrapper -->

[lucy24]

I believe the following [w3.org] translates as "It can't be done" (assume "if" before each item on the list):

1. 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width is shrink-to-fit. Then solve for 'left'
2. 'left' and 'right' are 'auto' and 'width' is not 'auto', then if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position, otherwise set 'right' to the static position. Then solve for 'left' (if 'direction is 'rtl') or 'right' (if 'direction' is 'ltr').
3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
4. 'left' is 'auto', 'width' and 'right' are not 'auto', then solve for 'left'
5. 'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'
6. 'right' is 'auto', 'left' and 'width' are not 'auto', then solve for 'right'

#2 is the tricky one; all the others do what you'd expect. If you set all three or none of the three properties to "auto" (earlier on the same page) it is interpreted as left=0 or right=0 depending on direction of script.

Why does the wrapper need to be absolutely positioned? It may work better if you center it and then position its contents as needed.

[alt131]

Hi Lorel, what fun. The wrapper is positioned with left and right set to auto and no width, so that defaults to auto as well.

That means the element is drawn in the same place as if it had been set position:static (the default). After the margins, padding etc are computed (in this case 0), it is drawn where it would appear in the normal flow, as if no position had been set.

Is it possible to remove the position and use auto on margins instead?

[alt131]

ooops, cross post.
The answer is in the para before that list in 10.3.7:

If all three of 'left', 'width', and 'right' are 'auto': First set any 'auto' values for 'margin-left' and 'margin-right' to 0. Then, if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position and apply rule number three below; otherwise, set 'right' to the static position and apply rule number one below.

... and the calculation of width is relevant because the offest for auto (as explained in 9.3.2) depends on what other properties (in this case wdith) are auto as well.

[Lorel]

Thanks for your help folks. I didn't understand the W3org data but I did center the wrapper and then everything fell into place. I did some reasearch earlier and it had said I had to have a postion:absolute or the wrapper and then I could use Position:relative on the other items. But that obviously didn't work.