title: Stacking divs with variable height in 2 columns like Facebook Timeline
body: <p>I want to create a natural flow of content. The problem that I now face is that the <code>&lt;div&gt;</code>s will only line up next to each other. They will not pass the bottom edge of the floated block on the opposite side.</p>
  
  <p>The following illustration clearly shows the problem. Let's say that I have 4 <code>&lt;div&gt;</code>s with variable heights:</p>
  
  <ul>
  <li>Div1 always starts left</li>
  <li>Div2 always is displayed on the right side</li>
  <li>Div3 is on the left or right side, depending on the hight of Div1 and Div2</li>
  <li>Div4 in this situation, Div4 doesn't stick to Div2's bottom</li>
  <li>Div5 the same problem occurs</li>
  </ul>
  
  <p>So, the position of the <code>divs &gt; Div2</code> should be determined by the height of the previous divs. Could you please advise me on how to achieve this?</p>
  
  <p><img src="https://i.stack.imgur.com/Sxjy2.jpg" alt="enter image description here"></p>