CODEWITHSUNDEEP
htmlcss
Or Weinberger
Or Weinberger

Reputation: 7482

CSS position:absolute + dynamic height

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/

Upvotes: 9

Views: 21694

Answers (2)

Barrie Reader
Barrie Reader

Reputation: 10713

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;
}

Upvotes: 1

Dan Hanly
Dan Hanly

Reputation: 7839

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.

Upvotes: 6

Related Questions