title: Make absolute positioned div expand parent div height
body: <p>As you can see in the CSS below, I want <code>child2</code> to position itself before <code>child1</code>. This is because the site I'm currently developing should also work on mobile devices, on which the <code>child2</code> should be at the bottom, as it contains the navigation which I want below the content on the mobile devices. - Why not 2 masterpages? This is the only 2 <code>divs</code> which are repositioned in the entire HTML, so 2 masterpages for this minor change is an overkill.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="parent"&gt;
      &lt;div class="child1"&gt;&lt;/div&gt;
      &lt;div class="child2"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>parent { position: relative; width: 100%; }
  child1 { width: auto; margin-left: 160px; }
  child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; }
  </code></pre>
  
  <p><code>child2</code> has dynamic height, as different subsites could have more or less navigation items.</p>
  
  <p>I know that absolute positioned elements are removed from the flow, thus ignored by other elements.<br>
  I tried setting <code>overflow:hidden;</code> on the parent div, but that didn't help, neither does the <code>clearfix</code>.</p>
  
  <p>My last resort will be JavaScript to reposition the two <code>divs</code> accordingly, but for now I'll try and see if there exist a non-JavaScript way of doing this.</p>