Search code examples
csspositioningcss-position

parent div expanding to child div

I have to divs:

<div id="outerContent">
  <div id="innerContent">
  </div>
</div>

innerContents' position is absolute (I need it that way for JavaScript animation). How do I get outerContent to expand to innerContents' height as if innerContent wouldn't be set to position:absolute?

Solution

  • Two things:

    1) You should be able to slide the innerdiv away without the need of position:absolute;, position:relative; should suffice. The advantage is it's still considered to be in the rendering flow, as aveic called it.

    See my jsfiddle example

    2) if you do want to use absolute, you can make sure it doesn't screw anything up by only enabling it with JS, since you're using JS anyway to perform the animation. So in JS, just say $('#innerDiv').css({position: absolute}); and you still won't abandon people without JS enabled.