title: Layout Building - Div elements not aligining
body: <p>Im trying to build a layout...The first 3 containers are displaying as expected..
  I want the container 4 to be displayed along side of container1,container2,container</p>
  
  <p>RequirementL<br>
  Container 4 should be displayed next to (Container1 + 2 + 3)</p>
  
  <p>fiddle:
      <a href="http://jsfiddle.net/prem1980/39rJd/1/" rel="nofollow">http://jsfiddle.net/prem1980/39rJd/1/</a></p>
  
  <p>html</p>
  
  <pre><code>&lt;div id="main-container"&gt;
      &lt;div id="container1"&gt;
          container-1
      &lt;/div&gt;
      &lt;div id="container2"&gt;
      &lt;/div&gt;
      &lt;div id="container3"&gt;
      &lt;/div&gt;
      &lt;div id="container4"&gt;
          container 4
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>html, body{
      height: 100%;
      width:100%;
      /*background-color:#AFEEEE;*/
      background-color:grey;
  }
  
  #main-container {
      height:100%;
      width:100%;
  
      /*margin:10px 10px 10px 10px;    */
  }
  
  #container1 {
      height:60%;
      width:30%;
      margin:10px 10px;
      background-color:green;
      float:left;
      clear:both;
  }
  
  #container2 {
      height:20%;
      width:30%;
      margin:10px 10px;
      background-color:yellow;
      float:left;
      clear:both;
  }
  
  #container3 {
      height:20%;
      width:30%;
      margin:10px 10px;
      background-color:red;
      float:left;
      clear:both;
  }
  
  #container4 {
      height:100%;
      width:30%;
      margin:10px 10px;
      background-color:orange;
      float:left;
  
  }
  </code></pre>