auto adjust container <DIV> height to accommodate absolutely positioned child <DIV>s

Question

is there a way to auto adjust container DIV height to accommodate absolutely positioned child DIVs? i'd like to get something like

 +-----------------------+ | container             | |  +------+   +------+  | |  | chld |   | chld |  | |  |   1  |   |   2  |  | |  |      |   |      |  | |  +------+   +------+  | |       +------+        | |       | chld |        | |       |   3  |        | |       |      |        | |       +------+        | +-----------------------+ 

i try something like:

<div class="container" style="position: relative; border: solid thin">     <div class="chld" style="width: 20px;                               height: 20px;                               position: absolute; left: 5px; top: 5px;                              border: dashed thin;"><div>     <div class="chld" style="width: 20px;                               height: 20px;                               position: absolute; left: 30px; top: 5px;                              border: dashed thin;"><div>     <div class="chld" style="width: 20px;                               height: 20px;                               position: absolute; left: 15px; top: 30px;                              border: dashed thin;"></div> </div> 

but the "container" div stays zero height. I understand, that this might be the expected behaviour, as elements are 'taken out' of the flow when positioned absolutely, but is there a workaround for this? (except for precalculating the resulting height and setting it manually)

Answer 1

If you use position:relative instead of position absolute an empty space will stay in the page structure where the element should be, and this space will be the height of the element you've moved.

So you could float chld1 and chld2 to get them side by side, add top & bottom padding to push chld 3 down and use position relative to split them apart and move to any height. Then use clear both on chld3.

Something like

#exp_outer {    width: 400px;    border: 1px solid black;  }  #chld1 {    float: left;    margin: 30px 0 20px;    left: 50px  }  #chld2 {    float: right;    margin: 30px 0 20px;    right: 50px;  }  #chld3 {    left: 150px;    clear: both;  }  .box {    position: relative;    width: 80px;    height: 80px;    border: 1px solid black;  }

<div id="exp_outer">    <div id="chld1" class="box">Child1</div>    <div id="chld2" class="box">Child2</div>    <div id="chld3" class="box">Child3</div>  </div>

Answer 2

overflow:auto

This is the new clearfix method, FYI. However, it doesn't always expand the container to the height of its tallest & absolutely positioned child.