title: position first div below other two - all have variable height
body: <p>I am trying to put 3 divs (lets call them div1, div2 and div3) into one container div with 700px width. What I want to manage is that the content of the div1 is higher in the source code, but is visible lower at the webpage (please see attached picture). </p>
  
  <pre><code>&lt;div id="container"&gt;
  &lt;div id="div1"&gt;content of the div1&lt;/div&gt;
  &lt;div id="div2"&gt;content of the div2&lt;/div&gt;
  &lt;div id="div3"&gt;content of the div3&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem I am not able to solve is, that <strong>all 3 divs may have varibale height</strong>. So I cannot use position:absolute;top: x px; or padding-top: x px</p>
  
  <p><strong>Picture of requested layout:</strong> <a href="http://snapshot.own.cz/divs.png" rel="nofollow">http://snapshot.own.cz/divs.png</a></p>
  
  <p><strong>EDIT:</strong></p>
  
  <p><strong>solved</strong> using JS as suggested in comments (JS after load gets real height of div2 and sets top: value to div1)</p>
  
  <pre><code>$(document).ready(function() {
  var newtop = $('#div2').height() ;
  $('#div1').css("top",newtop); 
          });
  
  &lt;style&gt;
  #container{
      width: 700px;
      clear: both;
  }
  #div1{
      width: 700px;
      background: red;
      float: right;
      position:relative;
      top:20px;
  }
  #div2{
      width: 500px;
      height: 200px;
      background: blue;
      float: left;
      position: absolute;
  }
  #div3{
      width: 200px;
      background: green;
      float: left;
      position:absolute;
      left: 500px;
  }
  &lt;/style&gt;
  
  &lt;div id="container"&gt;
  &lt;div id="div1"&gt;content of the div1&lt;/div&gt;
  &lt;div id="div2"&gt;content of the div2&lt;/div&gt;
  &lt;div id="div3"&gt;content of the div3&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>