Expand to the largest contained "positioned" block? <p>In a container can you <em>in any way</em> position two blocks <em>above each other</em> (eg absolute) and make the container expand to the size/height of the largest one?</p> <p>If using <code>position: absolute</code> the container does not expand to the size of the positioned element.</p> <p><em>Is there any way to get this effect with CSS?</em></p> <hr> <p>Illustrative (defunct) example:</p> <pre><code>&lt;div class="wrap"&gt; &lt;div class="foo"&gt;foo&lt;/div&gt; &lt;div class="bar"&gt;bar&lt;/div&gt; &lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>.wrap{ position: relative; } .foo{ height: 40px; } .bar{ height: 60px; width: 100%; position: absolute; top: 0; left: 0; } </code></pre> <p>jsFiddle: <a href="http://jsfiddle.net/qjFR9/" rel="nofollow">http://jsfiddle.net/qjFR9/</a></p> <p>I'd like to position <code>.bar</code> over <code>.foo</code> (position <code>.bar</code> as if there was no <code>.foo</code>) and <code>.wrap</code> should be the height of the largest child.</p>