title: Div underneath 2 other Divs, with position driven by position and height of BOTH others
body: <p>This problem relates to a design pattern I'm trying to implement for positioning content on a page.</p>
  
  <p>Conceptually the html page is divided into a number of columns.  My working example will be four columns of equal width (so each column spans 25% of the overall available width).</p>
  
  <p>Divs are then positioned on the page in a notional sequence, with each Div being positioned horizontally to occupy one or more columns, and positioned vertically as far up the page as possible given any Divs in the columns immediately above. (For those familiar with the game Connect 4, this is a little like Connect 4 but the pieces slide from the bottom up and may each occupy more than 1 column.)</p>
  
  <p>For example:</p>
  
  <pre><code>-Div1 spans cols 1-4 (appears at top of page, width=100%)
  -Div2 spans cols 1-3 (appears under Div1, left=0%, width=75%)
  -Div3 occupies col 4 (appears under Div1,left=75%,width=25%)
  -Div4 spans cols 1-2 (appears under Div2, left=0%, width=50%)
  -Div5 spans cols 3-4 (appears under Div2 &amp; Div3, left=50%, width=50%)
  </code></pre>
  
  <p>Here's a crude attempt to visualise this:</p>
  
  <pre><code>_col1_    _col2_    _col3_    _col4_
  
  111111111111111111111111111111111111
  
  22222222222222222222222222    333333
  
  4444444444444444    5555555555555555
  </code></pre>
  
  <p>The problem in practice:</p>
  
  <p>A spec like the one above is translated into traditional HTML and CSS to achieve the desired end result.  Each Div's horizontal position and size can be defined in percentage terms (as above).  Each Div's vertical position is defined relative to the Divs that are known to be immediately above it.  The height of each Div is unknown since it will depend on the Div's content and the overall available page width.</p>
  
  <p>Everything is pretty straightforward except for one problem: how can I define the Top position of a Div that sits beneath <em>two or more</em> other Divs? This would be Div5 in the example above - its top position is driven by both Div2 and Div3 (Div5.top will be the 'lower' (i.e. greater in value) of Div2.bottom and Div3.bottom)</p>
  
  <p>I've ruled out using a table or wrapping Div2 and Div3 in another Div (since in both cases Div4 should not be driven by Div3).  </p>
  
  <p>Can this be achieved with pure CSS or will scripting be required?  If the answer is scripting then any direction on how it would work would be appreciated (and of course a working example would be an extraordinary help!)</p>
  
  <p>Thanks in advance for any guidance.</p>
  
  <p>JB.</p>