title: A specific layout using float
body: <p>Ii's been a while since I programmed a website and it seems that I have forgot some basic concepts about FLOAT!</p>
  
  <p><img src="https://i.stack.imgur.com/vy6lI.png" alt="How to make this layout in divs using FLOAT"></p>
  
  <p>Can anyone help making this (on picture) layout using 4 divs and FLOAT?</p>
  
  <p>I have tried this:</p>
  
  <pre><code>    &lt;header&gt;
              &lt;div id="fill_left"&gt;&lt;/div&gt;
              &lt;div id="top"&gt;&lt;/div&gt;
              &lt;div id="fill_right"&gt;&lt;/div&gt;
              &lt;div id="bottom"&gt;&lt;/div&gt;  
      &lt;/header&gt;
  </code></pre>
  
  <p>And CSS:</p>
  
  <pre><code>header {
  width: 100%;
  height: 9em;
  background-color: lightblue;
  }
  
  #fill_left{
  width: 5%;
  height: 100%;
  background-color: lightcoral;
  float: left;
  }
  
  #top{
  width:80%;
  height: 50%;
  background-color: lightgray;
  float: left;
  }
  #bottom{
  width:80%;
  height: 50%;
  background-color: lightseagreen;
  float: left;
  }
  
  #fill_right{
  width: 5%;
  height: 100%;
  background-color: lightcoral;
  float: left;
  }
  </code></pre>
  
  <p>And of course they're all inside a wrapper{ width: 100%, height: 138px}</p>
  
  <p>Thanks</p>