divs being messed up when using relative position and using the auto center method

Question

i am trying to get my site to auto center a div that has a bunch of divs inside of it on the page by using a set width and defining a margin of 0 auto; if i set my inner div elements to absolute positioning everything lines up properly but it doesn't auto center, but if i set the positioning to relative the inner divs stack on top of each other in the correct horizontal position but not the vertical. so my question is what do i need to do to get my page to auto center while maintaining the correct relative positioning.

sample code:

<div class="container">
<div id="Table_01" align="center">
<div id="layout-01_"> <img id="layout_01" src="images/layout_01.png" width="1060" height="11" alt="" /> </div>
<div id="layout-02_"> <img id="layout_02" src="images/layout_02.png" width="28" height="1489" alt="" /> </div>
<div id="layout-03_"> <img id="layout_03" src="images/layout_03.png" width="279" height="65" alt="" /> </div>
<div id="layout-04_"> <img id="layout_04" src="images/layout_04.png" width="753" height="4" alt="" /> </div>
<div id="layout-05_"> <img id="layout_05" src="images/layout_05.png" width="599" height="1" alt="" /> </div>
</div>
</div>


div.container {
    width: 1060px;
    margin: 0 auto;
}

#Table_01 {
    position:relative;
    left:0px;
    top:0px;
    width:1060px;
    height:1500px;
    text-align: center;

}

#layout-01_ {
    position:relative;
    left:0px;
    top:0px;
    width:1060px;
    height:11px;
}

#layout-02_ {
    position:relative;
    left:0px;
    top:11px;
    width:28px;
    height:1489px;
}

#layout-03_ {
    position:relative;
    left:28px;
    top:11px;
    width:279px;
    height:65px;
}

#layout-04_ {
    position:relative;
    left:307px;
    top:11px;
    width:753px;
    height:4px;
}

#layout-05_ {
    position:relative;
    left:307px;
    top:15px;
    width:599px;
    height:1px;
 }

Answer 1

Try relative on the parent and absolute for the children. And have some content that isn't absolutely positioned inside, possibly add a min-height.

Ideally you don't want to use AP though, for everything.

Answer 2

First off: a few basics about positioning. You have two options.

1. Use position: relative with float: left on each of the layout divs, or;
2. Use position: absolute with left: xyzpx and top: xyzpx. Make sure to put keep the position: relative in the #Table_01 class. Absolutely position elements will be positioned relative to the top left corner of the first ancestor where the position is set to anything other than static. Refer to http://www.w3schools.com/css/css_positioning.asp for more information on positioning.

For centring, apply a width (any unit), margin-left: auto and margin-right: auto to the parent div. This will centre that div. Any children will not be centred. Which element, exactly, is it that you want centred? .container or #Table_01?

On another note, unless you absolutely know what size screens your viewers are going to be using, I recommend you use percentages instead of pixels. If the user, like myself, has a 1920 by 1080 screen, it is going to look awefully funny if it is only 1060px or something. If you set it to 80% with margin-left / right set to auto then there will only be 10% on either side. I usually tend to go for 60 or 70% myself.

Edit: One thing I neglected to mention - if using the relative / float: left method, whenever you want to put the remaining content below previous content, place a div with clear: both after that content.

For example:

<div style="width: 25%; float: left;">quarter of the width</div>
<div style="width: 50%; float: left;">half of the width</div>
<div style="clear: both;"></div>
Extra content

This will generate two "columns", one at 25% and one at 50% of the parent containers width. The phrase "Extra content" will appear below the longest column. For example if one is 3 lines and the other is 5 lines, this phrase will appear 6 lines down.