Grow your CSS skills. Land your dream job.

Container height with position:absolute elements

  • # April 10, 2013 at 7:08 am

    http://jsfiddle.net/LJs9J/

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

    # April 10, 2013 at 7:12 am

    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?

    # April 10, 2013 at 9:31 am

    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.

    # April 10, 2013 at 9:59 am

    >** 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.

    # April 11, 2013 at 9:25 am

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

    # April 11, 2013 at 9:45 am

    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/

    # April 11, 2013 at 9:54 am

    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.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".