title: Floating divs with different height, fill empty space
body: <p>I have 3 floating divs (second /green/ is taller than third /blue/) and while viewport is narrower I would like to last (third) div would take (fill) empty space below first div. </p>
  
  <p><img src="https://i.stack.imgur.com/8J0XR.png" alt="preview"></p>
  
  <p>I could achieve this by using media queries:</p>
  
  <pre><code>@media only screen and (max-width : 750px) 
  {
      #third
      {
          margin-top: -100px;
      }
  }
  
  @media only screen and (max-width : 500px) 
  {
      #third
      {
          margin-top: 0px;
      }
  }
  </code></pre>
  
  <p>See jsFiddle: <a href="http://jsfiddle.net/s2G5J/15/" rel="nofollow noreferrer">http://jsfiddle.net/s2G5J/15/</a> How to achive this effect without media queries (I don't know divs height). Thank you in advance!</p>