[Millennium]

I have a page header that I'm trying to position absolutely. It's at the bottom of my HTML code, but I want to use my stylesheet to position it at the top.

That part isn't hard. But I also need it centered horizontally. The normal trick of setting margin-left and margin-right to auto doesn't seem to work for absolutely-positioned elements. Anyone else know how to do this? I think I've figured out a way to do it with JavaScript, but I'd rather not resort to that if I don't have to.

[residentEvil]

hmmm

i place a header (and footer) inside a centered table. that makes it always centered to whatever size your browser window is...

[glhaynes]

I think you can do

</font><blockquote><font size="1" face="Geneva, Verdana, Arial, sans-serif">code:</font><hr /><pre style="font-size:x-small; font-family: monospace;"> margin-left: auto; margin-right: auto; </pre><hr /></blockquote><font size="1" face="Geneva, Verdana, Arial, sans-serif">to get what you want.

See <a href="http://www.allmyfaqs.com/cgi-bin/wiki.pl?Center_with_CSS" target="_blank">here</a> for more.

[Millennium]

</font><blockquote><font size="1" face="Geneva, Verdana, Arial, sans-serif">quote:</font><hr /><font size="1" face="Geneva, Verdana, Arial, sans-serif">Originally posted by glhaynes:
<strong>I think you can do

</font><blockquote><font size="1" face="Geneva, Verdana, Arial, sans-serif">code:</font><hr /><pre style="font-size:x-small; font-family: monospace;"> margin-left: auto; margin-right: auto; </pre><hr /></blockquote><font size="1" face="Geneva, Verdana, Arial, sans-serif">to get what you want.

See <a href="http://www.allmyfaqs.com/cgi-bin/wiki.pl?Center_with_CSS" target="_blank">here</a> for more.</strong></font><hr /></blockquote><font size="1" face="Geneva, Verdana, Arial, sans-serif">Unfortunately, that trick doesn't seem to work for absolutely-positioned elements. I assume it probably doesn't work with fixed-positioned elements either. It does work for static and relative positioning, though.

[ism]

This technique should work with absolutely positioned elements (negative margin technique).

It requires you to know the width of the header (say 400px), position the element left by this amount and then set it back right half of it's width.

Style using:

div#header {
position: absolute;
top: 0px;
width: 400px;
margin-left: -200px;
left: 400px;
}

Can't think of a better way just yet. Thinking perhaps floats to get around absolute positioning, but then you've got the same problem with centering. Hmmm, ain't css fun?

[Simon Mundy]

This is not the cleanest way, but what about this:

</font><blockquote><font size="1" face="Geneva, Verdana, Arial, sans-serif">code:</font><hr /><pre style="font-size:x-small; font-family: monospace;">&lt;div style=&quot;position: absolute; left:0px; top:0px; width: 100%&quot;&gt;
&lt;div style=&quot;text-align: center&quot;&gt;
Your header goes here
&lt;/div&gt;
&lt;/div&gt;</pre><hr /></blockquote><font size="1" face="Geneva, Verdana, Arial, sans-serif">The only problem I can see immediately is with IE5.1 for Mac - it resizes a window fine outwards, but make the window more narrow and it doesn't adjust the width of the DIV. Mozilla seems to work well. Haven't tested any others.

Do you need to put this at the end of your code? It would degrade better if it were at the top.

<small>[ 07-10-2002, 10:59 PM: Message edited by: Simon Mundy ]</small>

[cnelson87]

Don't have time to actually try this, but it seems straight forward.
Let's say your banner image is W 400px by H 60px.
Set your div tag style to:
top: 0px
left: 0px
width: 100%
height: 60px
align: center
* put your banner image tag here *
close div tag.

Give it whirl. My curiosity is piqued. I'll check back later.
C.