I am trying to centre a layout. I have been using a css hack which is not the best option to do.
My previous method(http://www.rajsolutions.net/center2.html)
CSS code below
body {
background-color: #336633;
margin: 0px;
padding: 0px;
background-image: url(images/bg_center_green.gif);
background-repeat: repeat-y;
background-position: center;
}

#container {
position:absolute;
left:50%;
top:0px;
width:980px;
height:786px;
margin-left: -490px;
background-color: #73B131;
}

#logo_ {
position:absolute;
left:42px;
top:0px;
width:418px;
height:71px;
}

#topmenu_ {
position:absolute;
left:671px;
top:22px;
width:267px;
height:34px;
margin: 0px;
}

This makes the container stay in the middle I nest all the divs inside the Container div.(topmenu_ and logo_ are id of div)

I realised that is not a right way to centre a tableless layout. Especially since I now I am designing site for 1024 screen size. Earlier I used to design for 800 screen size and there was no problem(as 640X480 monitors do not exist and if I think can be conviniently ignored) But now with a 1024 layout if opened in a n 800X600 screen size the entire layout gets a negatively positioned out of the screen to the left.

So I took some help and found the following way to center my divs. This again uses the containter div but positions it the followint way(http://www.rajsolutions.net/center.html)
CSS code below
body {
text-align: center;
background-color: #336633;
background-image: url(images/bg_center_green.gif);
background-repeat: repeat-y;
}

#container {
margin: 0 auto;
width: 980px;
background-color: #73B131;
text-align: left;
}

As you can see the containter has a background-color: #73B131; Which is not being "rendered".

Morover if you notice The background is perfectly aligned in (http://www.rajsolutions.net/center2.html) It is there to create some sort of a shadow effect.
But when i am using the new method(which i believe is a better way to position it) the BG does not match and it does not stay in one postions in different screen resolutions. At a smaller resolution i.e. 800 it just goes haywire(the previouse method i.e. (http://www.rajsolutions.net/center2.html) at smaller resolution layout goes into negative positioning on the left so you cannot really see the background.(which is worse)

Could you tell me the right way to achieve this ((http://www.rajsolutions.net/center2.html)) using css.

Thank you.

First, get rid of all the position:absolute, it's not necessary and causes problems.

Second, the method you listed last for centering the better way with text-align: center on the body and margin: 0 auto; on the #container - BUT, you must remove the absolute positioning.

The Bg color on your container IS being rendered, the problem is that it does not CONTAIN the elements within it and that is because of the absolute positioning. Absolute takes the elements OUT of the normal document flow so they don't have any effect on the other elements on the page.

Learn to use the normal document flow and get familiar with using floats to layout your pages.

Thank You Ladynred
So you mean to say that the correct code for

#logo_ {
position:absolute;
left:42px;
top:0px;
width:418px;
height:71px;
}

Would be

#logo_ {
left:42px;
top:0px;
width:418px;
height:71px;
}

I tried this before and I just had all my layers stacked neatly in order one below the other. I even tried positioning it "relative" but it just get positioned one below the other.
I really dont know what to do here. I think i will have to use tables again
About the bg I dont see it in any browser I tried add A space in the containter div but no luck. Only the entire line of the space get the green bg Not the whole div.
Any more help on this one

No, I mean if you used a float to put it on the left it would be more like:

#logo_{
float:left
width: 418px;
height: 71px;
margin: 0;
}
Maybe you should read more about using floats and about layouts in general:
http://css-discuss.incutio.com/?page=FloatLayouts

Ok Ladynred. I will be going throught the link.
What i was looking for is apart from the options I have used and am planning to use. Is there any other easier way to centre pages that anyone is using succesfully.
Thanks

No. I already told you, the method I referred to is the better way and the easiest, but you cannot use position:absolute on everything.

Thanks ladynred.
I tried removing absolute and did not get the desired results.
I see that you have suggested to use float and I have a lot of reading to do on that.
For the meantime I have used a container table and put all the divs in that it is working fine. I needed to get the site up. Then I will have to go into detail into this. As I have a few other sites which i want to position the right way.
Thank you for you help