Layout Centering with CSS

[SofreeWeb]

Hello, im new to the forum and i am having some issues with centering my layout in a <div class="container"></div> tag. Below is the CSS from my main page.

I have tried everything that i have learned about CSS to get my page to center in any browser. As you will notice in the code, i have a (position:absolute) in each div class. I even tried taking that out but it just centered everything without keeping the layout. By the way this code is generated from Adobe Image Ready. If someone can help me with this i will greatly appreciate it and refer this site to all my friends.

--------------------------------------------------------------------------
<style type="text/css">
<!--


div.Table_01 {
position:absolute;
left:0px;
top:0px;
width:900px;
height:1840px;
}

div.index-01 {
position:absolute;
left:0px;
top:0px;
width:49px;
height:1800px;
background-image: url(images/index_01.gif);
}

div.index-02 {
position:absolute;
left:49px;
top:0px;
width:633px;
height:30px;
background-image: url(images/index_02.gif);
}

div.index-03 {
position:absolute;
left:682px;
top:0px;
width:168px;
height:30px;
background-image: url(images/index_03.gif);
}

div.index-04 {
position:absolute;
left:850px;
top:0px;
width:50px;
height:1800px;
background-image: url(images/index_04.gif);
}

div.index-05 {
position:absolute;
left:49px;
top:30px;
width:633px;
height:195px;
background-image: url(images/index_05.gif);
}

div.index-06 {
position:absolute;
left:682px;
top:30px;
width:168px;
height:30px;
}

div.index-07 {
position:absolute;
left:682px;
top:60px;
width:168px;
height:30px;
}

div.index-08 {
position:absolute;
left:682px;
top:90px;
width:168px;
height:30px;
}

div.index-09 {
position:absolute;
left:682px;
top:120px;
width:168px;
height:30px;
}

div.index-10 {
position:absolute;
left:682px;
top:150px;
width:168px;
height:30px;
}

div.index-11 {
position:absolute;
left:682px;
top:180px;
width:168px;
height:30px;
}

div.index-12 {
position:absolute;
left:682px;
top:210px;
width:168px;
height:15px;
}

div.index-13 {
position:absolute;
left:49px;
top:225px;
width:616px;
height:35px;
background-image: url(images/index_13.gif);
}

div.index-14 {
position:absolute;
left:665px;
top:225px;
width:185px;
height:35px;
background-image: url(images/index_14.gif);
}

div.index-15 {
position:absolute;
left:49px;
top:260px;
width:11px;
height:1539px;
background-image: url(images/index_15.gif);
}

div.index-16 {
position:absolute;
left:60px;
top:260px;
width:141px;
height:31px;
}

div.index-17 {
position:absolute;
left:201px;
top:260px;
width:9px;
height:1539px;
background-image: url(images/index_17.gif);
}

div.index-18 {
position:absolute;
left:210px;
top:260px;
width:446px;
height:1539px;
background-image: url(images/index_18.gif);
}

div.index-19 {
position:absolute;
left:656px;
top:260px;
width:9px;
height:1539px;
background-image: url(images/index_19.gif);
}

div.index-20 {
position:absolute;
left:665px;
top:260px;
width:175px;
height:230px;
background-image: url(images/index_20.gif);
}

div.index-21 {
position:absolute;
left:840px;
top:260px;
width:10px;
height:1539px;
background-image: url(images/index_21.gif);
}

div.index-22 {
position:absolute;
left:60px;
top:291px;
width:141px;
height:29px;
}

div.index-23 {
position:absolute;
left:60px;
top:320px;
width:141px;
height:25px;
}

div.index-24 {
position:absolute;
left:60px;
top:345px;
width:141px;
height:25px;
}

div.index-25 {
position:absolute;
left:60px;
top:370px;
width:141px;
height:22px;
}

div.index-26 {
position:absolute;
left:60px;
top:392px;
width:141px;
height:23px;
}

div.index-27 {
position:absolute;
left:60px;
top:415px;
width:141px;
height:25px;
}

div.index-28 {
position:absolute;
left:60px;
top:440px;
width:141px;
height:25px;
}

div.index-29 {
position:absolute;
left:60px;
top:465px;
width:141px;
height:25px;
}

div.index-30 {
position:absolute;
left:60px;
top:490px;
width:141px;
height:1309px;
background-image: url(images/index_30.gif);
}

div.index-31 {
position:absolute;
left:665px;
top:490px;
width:175px;
height:1309px;
background-image: url(images/index_31.gif);
}

div.index-32 {
position:absolute;
left:0px;
top:1800px;
width:900px;
height:40px;
background-image: url(images/index_32.gif);
}

div.index-33 {
position:absolute;
left:899px;
top:960px;
width:1px;
height:40px;
}

body {
text-align:center;
margin-left: auto;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
}

div.container {
margin: 0 auto;
width: 900px;
text-align: left;
}

.style1 {color: #1D7595}
.style11 {font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #616056; }
.style15 { color: #1D7595;
font-weight: bold;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
.style16 {font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #616056; font-weight: bold; }
.style3 {color: #1D7595; font-weight: bold; }
.style8 {font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
.style17 {color: #FFFFFF}
.style18 {font-family: Arial, Helvetica, sans-serif}
.style19 {
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
.style20 {color: #616056}

-->
</style>
--------------------------------------------------------------------------

Thanks in Advance for any help and/or suggestion

Sean

[htmlbasictutor]

I'm guessing you are having problems centering your design because you have used absolute positioning for containers I assume are inside the container.

1. Rename all those numbered styles with meaningful names. You aren't going to remember in a day or two what they are all for
2. Take out all that absolute positioning and enter the containers in your coding in the order you want them to appear on the screen to start with.
3. Once you have them all linerized, then start changing widths, floats, etc to get the internal containers to land where you want them.
4. Absolute positioning is really hard to manage if you aren't well experienced in CSS. It appears that the program you used let you do this when there was a better way to do it.

[EnhanceSEO]

Try -

margin: 0px auto;

This is what I use to centre align everything!