Centering a exisiting CSS layout

[vicf23]

I've been working on my site for awhile, and I've decided that I'd like to center the layout with varible margins depending on the users screen size.

I found a few tutorials online, but none of them are working correctly. I'm guessing this is because I used absolute css positioning, but I'm really not sure.

Can anyone give me some suggestions? I've just started using CSS so I'm not to sure how whats involved to switch the absolutes to some other form.

Thanks everyone, here are the links.

http://faithum.aerohostale.com/
http://faithum.aerohostale.com/styles/indexstyle.css

[harbingerOTV]

only looking at the css link and not the source code you can do something like this:

[code]
body {
text-align: center;
}
#wrap {
width: whatever you need it to be to contain everything;
margin: 0 auto;
text-align: left;
position: relative;
}
[code]

wrap everything in you html inside the wrap and that will center it.

your absloute positioning stuff will now be absolute to the wrap so you need to re-write all the top and left positioning on them.

easier way really since you dont have a lot going on yet, would be to do that and thennot use absolutes (unless absolutely neccessary ;) )

if youtry the first and readjust and find it a pain just holler back. i'm abput to go to a show but I can whip up something easy that'll work.

[kc0nnected]

Hey HarbingerOTV, I am not the topic originator but I found your reply very helpful. Thank you.

[Arbitrator]

body {
text-align: center;
} That method only works in the Internet Explorer browser and will fail in standards-compliant browsers. The correct method for centering a block-level element is to use the margin: auto declaration on the container element (or #wrap as harbingerOTV referred to it), not text-align: center which is for inline content (text). This method will work in Internet Explorer as well as long as the page is displaying in standards-compliance mode as your page (http://faithum.aerohostale.com/) is.

I now see that he added margin: 0 auto to his code. The point that you do not need that excess code remains, however. The only reason to use it is to accommodate the antiquated Internet Explorer 5 which is IMO unnecessary; it also means that you need to put up with that browser's other rendering flaws such as the broken box model.