CSS position:absolute + dynamic height

Question

I have 4 <div> tags one after the other, all in position:absolute and I align them using top and left.

The 3rd div tag contains dynamic content and the height of the div changes according to the amount of text in it. However, as I set the top and left of all divs, the 4th div is affected by the height of the 3rd dynamic div.

How can I solve this?

http://jsfiddle.net/25Xrh/

Answer 1

You may want to try wrapping the 4 divs in a parent div and absolutely positioning that. Then you can allow the position of one of the children divs to affect another.

http://jsfiddle.net/25Xrh/5/

The solution you had meant that no matter what you tried to affect the top:60px and left:180px stopped it from moving anywhere other than this, so the dynamic content div wasn't able to reposition it.

Answer 2

Here is my test: http://jsfiddle.net/neuroflux/25Xrh/7/

Code:

.first {
    position:relative;
    left:180px;
}

.second {
    position:relative;
    left:180px;
}

.third {
    position: relative;
    left:180px;
}

.fourth {
    position:relative;
    left:180px;
}