How to adjust relative div height with respect to inner absolute height?

Question

For example: http://jsfiddle.net/MYvYy/182/

I have a lot of 'inner_box' elements inside of 'outer_box'. Inner_box elements a absolute.

I would like to adjust the outer_box height so that all inner_box elements fit in the outer_box.

I know it can be done with js. But I don't really like adjusting style with scripts.

So I was wondering if it is possible to be done using CSS?

Answer 1

I have some workaround for this problem, it may not fit your situation but consider looking at it.
First of all we need to duplicate all absolute positioned div which you want to make the parent extend to its height. So your HTML will look like this.

<div class="outer_box">
    <div class="inner_box">1</div>
    <div class="inner_box ghost">1</div>
</div>

Then we need to add the "ghost div" CSS like so:

.inner_box.ghost{
    visibility: hidden;
    width: 100%;
    top: 0;
    left: 0;
    position: relative;
}

Answer 2

It's not possible with CSS alone.

Layout flow:

An element with position:absolute is outside of the layout flow of the rest of the page. As far as the relative parent is concerned, the absolute child occupies no space in the layout.

This is very useful if you need to have a pop-up or a nav menu nested inside a container, because it won't affect the layout of the container. That's the sort of use case that position:absolute is well-suited for.

Fixed height:

If you need absolute content to behave as if it's a part of the layout flow, use fixed height. Give the relative parent and the absolute child a fixed height, and avoid placing any variable-height child elements before the absolute child. If variable-height content does precede it, use a relative placeholder div with a fixed height at the location where the absolute child needs to appear.

If position:absolute has to be used and fixed height is not an option, use JavaScript.