Container height with position:absolute elements

[XaviJr]

http://jsfiddle.net/LJs9J/

Can you help me setting the height of #container? I tried everything: overflow:hidden, display:block, height:auto..

[Paulie_D]

As you have absolutely positioned the elements in the container you have taken them out of the document flow so the container now has (effectively) nothing in it….so it collapses.

Why are you positioning these divs that way?

[XaviJr]

So it’s impossible and I have to find other solution? Ok.

It’s a container for a menu content. At first those divs are all with height:0. When I click on the respective button I have an animation from height:0 to height:100%. I have position:absolute to have them at the same position.

[Paulie_D]

>** I have position:absolute to have them at the same position.**

Why? I’m not sure what it is you are trying to achieve.

If each of those positioned elements are going to be list items then there are **much** better ways of doing what **I think** you are trying to do.

Absolute positioning is the LAST layout method one should use if all other methods have failed.

[XaviJr]

Because if I don’t have position absolute they all get stacked and not at the same position: http://jsfiddle.net/LJs9J/2/

[CrocoDillon]

Not sure why you would want to do that but if you know which div will be tallest, make that one not absolute positioned…?

http://jsfiddle.net/LJs9J/3/

[Paulie_D]

As I said…

>I’m not sure what it is you are trying to achieve.

Do you have an example of the effect you are after. The animation will almost certianly have **nothing** to do with positioning.

[Author]

Posts