Center after absolute positioning?

[JohnKelly]

I'm in the process of converting my site from table-based layout to CSS.

In order for search engines to index page content first, then header, footer, etc. I load the header after content and then use absolute positioning to put it at th etop of page.

Problem is, I have a 760px width content area that is center using "margin-left: auto; margin-right: auto;". I can't seem to get the header to center using the same method. Here's the relevant CSS:

#header {
position: absolute;
top: 0;
left: 0;
/* The header can be set to either a fixed width or a liquid width. I prefer to make the header a liquid width for aesthetic purposes, but changing it to a fixed width will not affect the layout. This is an optional property. */
width: 760px;
/* replace this value with the height of your header. */
height: 70px;
/* background for the header. Replace the URL and the background color (#F2F2F2) with your choices for each. */
background: #999966;
color: #000000;
/* put this in to ensure that your header doesn't overlap the body of your website. */
overflow: hidden;
}

Any ideas?

[coyoteRick]

That's a toughy...

Try this:

img {
 position:absolute;
 top: 0;
 left: 50%;
 margin-left: -360px;
 }

The "left:50%" and "margin-left:-360px" cause a little tug of war with your absolute positioning.

Regardless, I would highly recommend AGAINST non-semantic markup. Having your masthead/header display AFTER the page content is a little backwards. Search engines are quite sophisticated nowadays and can be directed to prominent content on a page to be indexed by using your "heading" tags properly (like H1, H2, H5, etc). I'm not a professional SEO, but I know there's better ways out there...

[JohnKelly]

That worked! I ended up using margin-left: -360px; for exact center but it works in IE and Firefox. Thanks!

[Xapti]

My question to you is how the hell do you make a footer for your page when you're using absolute positioning?

And maybe I don't understand what you want exactly, but couldn't you jsut make a WRAPPER around the stuff, center it (fixed width), THEN absolutely position things inside the the way you want...

But like he said... there's no reason to be putting content first in the code, then just moving something above it later, At least as far as I know. Search engines index pages in a smart way, and they cache the content on top just as meaningfully as the content underneath. It just depends how it's marked up, and what the content itself is.

[Milamber]

My question to you is how the hell do you make a footer for your page when you're using absolute positioning?

quite easily really. use an relatively positioned wrapper for the site, then a relatively positioned content wrapper as the 1st block, then your absolute positioned header, then the footer without any position declaration.
Because the header is absolute positioned the footer will ignore it's positon when rendering and will position itself based off the content wrapper instead.

[Xapti]

For some reason I was thinking he was using absolute positioning for his content block too. Turns out he didn't say that, so nevermind.

[Milamber]

Oh and John, you might want to check your layout using different resolutions. I have a feeling your -360 isn't going to keep your content where you want it for other sizes. In which case I recommend moving to the wrapper method mentioned above. Just make sure to set the width of your wrapper to the site width (I assume 760px from your code) and set the margin on it as 0 auto;

[added]
[webmasterworld.com...] has a rough template for what I think you're after.
[/added]

[edited by: Milamber at 7:32 pm (utc) on June 27, 2007]

[coyoteRick]

I'm glad it worked for you.

However, try testing your results in IE 6 and below and you may wince and cry. Relative & Absolute positioning combos have done that to me often. Sometimes the space the element normally occupies in the flow will stay reserved even though you use the position property.

If everything's good in those tests, right on!

I tend to stay away from the position property unless I'm working on a layered design and using z-index is necessary.