title: How can I float two divs left (under each other) and two divs right (under each other)
body: <p>I'm trying this:</p>
  
  <pre><code>DIV 1    DIV 3
  DIV 2    DIV 4
  
  &lt;div class="div1"&gt;&lt;/div&gt;
  &lt;div class="div2"&gt;&lt;/div&gt;
  &lt;div class="div3"&gt;&lt;/div&gt;
  &lt;div class="div4"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I'm trying to use clear:both but it makes a top margin.. </p>
  
  <p>Use other divs to float left 1 and 2 and float right 3 and 4 is not an option in this case.. </p>
  
  <p>Here is my css:</p>
  
  <pre><code>.div1 {
    height:69px;
    float:left;
    width:48%;
    clear:both;
    background:pink;
  }
  
  .div2 {
    height:200px;
    margin-top:10px;
    display:block;
    float:left;
    width:48%;
    clear:both;
    background:lightblue;
  }
  
  .div3 {
    height:69px;
    line-height:30px;
    float:right;
    width:48%;
    background:red;
  }
  
  .div4 {
    height:200px;
    float:right;
    width:48%;
    background:yellow;
    clear:both;
  }
  </code></pre>