Positioning a DIV in accordance to another?

[tomothy]

I made this which should hopefully make it clear what I'm after:

http://img315.imageshack.us/img315/2249/divquery5us.jpg

Both DIV's use absolute positioning, and I don't want to use overflow in DIV1.

How would I go about doing that?

Any help would be appreciated,

Thanks.

[tomothy]

Here's the CSS I'm using...



.sections {
position:absolute;
left:50%;
margin-left:-265px;
width:250px;
padding:10px;
text-align:center;
border:10px double black;
background-color:FCA9B0;
font-family:arial, "times new roman", times, serif;
font-size:17px;
color:white;
z-index:2
}


.section1 {
top:400px
}

.section2 {
top:600px
}



And the markup...



<DIV class="sections section1">blahblahblah</div>
<DIV class="sections section2">moreblah</div>

[tomothy]

This not possible then?

Or is it so simple that nobody feels I even deserve an explanation, hehe.

[toicontien]

This not possible then?
It is.

In short, don't use absolute positioning. I don't see why you need it here. Just keep things in the normal document flow. Same CSS, just remove the negative margin, left, top and position properties. If you want to center a block level element, like a DIV, use auto left and right margins.

margin: 0 auto;