homepage Welcome to WebmasterWorld Guest from 54.166.105.24
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Center wrapper with position:absolute
Lorel

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4317434 posted 2:56 pm on May 25, 2011 (gmt 0)

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

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4317434 posted 4:13 pm on May 25, 2011 (gmt 0)

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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4317434 posted 4:37 pm on May 25, 2011 (gmt 0)

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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4317434 posted 4:42 pm on May 25, 2011 (gmt 0)

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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4317434 posted 11:10 pm on May 26, 2011 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved