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>