[RESOLVED] Attaching a relative div to an absolute div?

[sisko]

I have an absolute positioned div with a dynamic height. I need to place another div (not nested) directly underneath that. I've tried a variety of different things, most logical, but to no avail.

The answer is probably stupidly obvious, but I can't see it staring me right in the face. Has anyone done this before?

[nataliemac]

The problem with trying to position another div underneath an absolutely positioned div is that the absolutely positioned div is completely removed from the flow of the document and will sit in its absolute position either displaying under or over the other elements on the page depending on the order they sit in the code or the z-index assigned to positioned elements.

By default, a div will expand to fill the width of its container, so the best solution for you might be to absolutely position a container div for your two divs, then simply place your first and second div inside. The second div will display below the first and both will take up 100% of the width of the container unless you adjust them otherwise.

[ray326]

Put them both in a div positioned absolutely.

[sisko]

The problem with trying to position another div underneath an absolutely positioned div is that the absolutely positioned div is completely removed from the flow of the document and will sit in its absolute position either displaying under or over the other elements on the page depending on the order they sit in the code or the z-index assigned to positioned elements.

By default, a div will expand to fill the width of its container, so the best solution for you might be to absolutely position a container div for your two divs, then simply place your first and second div inside. The second div will display below the first and both will take up 100% of the width of the container unless you adjust them otherwise.

The weird thing that was hanging me up is that if you specify 'top:200px,' it displays from the bottom of the last element, and the last element was also positioned absolute (which therefore should have been removed from the flow O_o).

I got around this by changing the original div to relative, and tweaking the *margin-top* instead of just 'top.' Since the original div was relative, the second div slides properly into place underneath. Also, I didn't need to make any changes at all to the HTML markup which makes me happy .