How to stop parents of absolutely positioned elements from collapsing

Question

How can I stop the parent of an absolutely positioned element from collapsing?

In the following code, the height of the outer div is 0:

<div id="outer" style="position: relative;">
    <div id="inner" style="position: absolute; height: 100px;">
        <p>This is the inner content.</p>
    </div>            
</div>

This is very similar to this question, How do you keep parents of floated elements from collapsing?, which deals with floated elements, however I tried a few of the solutions (including the spacer, and clearfix class), and they don't work.

Thanks!

Answer 1

You can't : once the child is in absolute position, it's virtually 'outside' of the parent (in appearance).

what you can do, if you have included jquery, is use this unelegant hack :

$(".absolutepos").each(function() {
    $(this).parent().css("height",$(this).height());
});

and add the "absolutepos" class when placing the div in absolute position :

<div id="outer" style="position: relative;">
    <div id="inner absolutepos" style="position: absolute; height: 100px;">
        <p>This is the inner content.</p>
    </div>            
</div>

Answer 2

You can: by something I dubbed "dual parenting":

On a similar challenge, I ended up defining an outer relative object, (parenting the floats), and an absolutely defined box of the same dimensions as the relative parent, starting at 0,0 of the shared (relative) parent: an identical copy with the benefit of allowing to place objects within that are able to ignore the outer limits of the float (I needed it to center an object on the page, regardless of the width of the dynamic floats.)

The "dual parenting" squashed both problems:

1. the absolute parent couldn't get the height of the floats (but the height of the mutual parent that was able to adapt to the floats).
2. the relative parent couldn't position an object centered to the page (it only would find the middle between the floats, and keep the centered content from crossing the borders of the floating objects).

I did a fiddle (contains documentation) demonstrating how this setup squashes and squeezes while still keeping the centered box. The basic idea is outlined in the code below:

html (on a side note: the order of the div's (left-center-right, center-right-left,...) is irrelevant.)

<header>
     <div class="header-left">left</div>
     <div class="header-center">
        <div class="centerinner">middle</div>
     </div>
     <div class="header-right">right</div>
</header>

css

header {
    position:relative; /* shrinkwrap to contained floats */
    /* display: block  /* no need to state this here */
    width: 100%;
    margin:0;
    padding:0;
    vertical-align: top;
    /* background-color: papayawhip; /* Debug */
}
.header-left { /* top left of header. header adapts to height */
    float:left;
    display:block;
    /* width and padding as desired */
}
.header-center { /* absolute reference for container box */
    position:absolute;
    left: 0;
    width: 100%;
    height:100%;
    /* background-color: gainsboro; /* Debug */
}
.centerinner { /* centered within absolute reference */
    margin-left:45%;
    margin-right:45%;
    padding-left: 1ex;
    padding-right: 1ex;
    background-color: #D6A9C9;
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;
    height:100%;
}
.header-right {
    float:right;
    text-align: right;
    padding-left: 1ex;
    color: forestgreen;
 /* background-color: #D6F2C3; /* Debug */
}