title: HTML divs, how to wrap content?
body: <p>I have 3 div's like on this image: </p>
  
  <p><img src="https://i.stack.imgur.com/uPxjk.png" alt="enter image description here"></p>
  
  <p>div1 has fixed width but variable height, so what I would like is that if div1 height is bigger that the div2 height, the div3 stays under div2 and on the right of the div1, like here:</p>
  
  <p><img src="https://i.stack.imgur.com/e9Nwh.png" alt="enter image description here"></p>
  
  <p>Any idea on how to do this? For the moment, I have created a container:</p>
  
  <pre><code>&lt;div class="colcontainer"&gt;
      &lt;div class="col-left"&gt;
      {% block news %}{% endblock %}
      &lt;/div&gt;  
      &lt;div id="main_content"&gt;
          &lt;div class="col-right"&gt;
              {% block rightcol %}{% endblock %}
          &lt;/div&gt; 
          &lt;div id="content"&gt;
              &lt;div class="contentwrap"&gt;
                  &lt;div class="itemwrap"&gt;
                  {% block content %}{% endblock %}
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="content-bottom"&gt;&lt;div class="content-bottom-left"&gt;&lt;/div&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My CSS is like this:  </p>
  
  <pre><code>.col-left {
      float:left;
      padding:0;
      margin:0;
      width: 300px;
      min-height:198px;
  }
  
  .col-right {
      text-align:left;
      padding:0;
      margin:0 0 0 200px;
  }
  
  #content {
      background: none repeat scroll 0 0 #FFFFFF;
      float: left;
      margin-top: 10px;
      padding: 10px;
      width: 980px;
  }
  </code></pre>
  
  <p>Here is the <a href="http://jsfiddle.net/JRbFy" rel="noreferrer">JSFiddle demo</a></p>