How to stop parents of absolutely positioned elements from collapsing
css, positioning
Solution
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>
Problem
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!