How to stop parents of absolutely positioned elements from collapsing

Question

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

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 parent elements with floating elements collapsing? which relate to floating elements, however I tried a few of them (including the delimiter and clearfix class) and they do not work.

Thanks!

Answer 1

You cannot: as soon as the child is in an absolute position, he is actually “outside” the parent (in appearance).

what you can do if you enable jquery, this inconvenient hack is used:

 $(".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 dubbing " dual parental support ":

For a similar problem, I defined an external relative object (the parent of the floats) and an absolutely defined field of the same dimensions as the relative parent, starting from 0,0 of the general (relative) parent: an identical copy that allows placing objects inside it can ignore the outer limits of the float (I needed to focus the object on the page, regardless of the width of the dynamic floats.)

“Double parenting” crushed both problems:

• the absolute parent could not get the height of the floats (but the height of the mutual parent, who was able to adapt to the floats).
• the relative parent could not position the object centered on the page (he would only find the middle between the floats and leave the centered content crossing the boundaries of the floating objects).

I made a fiddle (contains documentation) demonstrating how this setting penetrates and compresses while maintaining the center frame. The basic idea is described in the code below:

HTML (side note: the order of the div (left-right-right, center-right-left, ...) does not matter.)

 <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 */ }