title: CSS tile layout using floats
body: <p>I have 7 tiles that i want to layout like the following image using CSS and floats<a href="https://i.stack.imgur.com/t9sNn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/t9sNn.png" alt="enter image description here"></a></p>
  
  <p>However i can't get the last 2 tiles to 'float' correctly. 
  Link to codepen: <a href="http://codepen.io/anon/pen/EPeRqO?editors=1100" rel="nofollow noreferrer">http://codepen.io/anon/pen/EPeRqO?editors=1100</a></p>
  
  <p>Here is my code</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="first"&gt;first&lt;/div&gt;
    &lt;div class="sixth"&gt;6th&lt;/div&gt;
    &lt;div class="fourth"&gt;fourth&lt;/div&gt;
    &lt;div class="second"&gt;second&lt;/div&gt;
    &lt;div class="seventh"&gt;seventh&lt;/div&gt;
    &lt;div class="fifth"&gt;fifth&lt;/div&gt;
    &lt;div class="third"&gt;third&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And my CSS</p>
  
  <pre><code>.container {max-width:1220px; max-height:370px;}
  div{margin-right:10px;}
  .first{  float:left;  width:550px;  height:370px;  background-color:#d7df52;  }
  .second{  float:left;  width:210px;  height:190px;  background-color:#51a279;  }
  .third{  float:left;  width:210px;  height:215px;  background-color:#d17466;  }
  .fourth{  float:right;  width:210px;  height:190px;  background-color:#d17466;  }
  .fifth{  float:right;  width:210px;  height:180px;  background-color:#d17466;  }
  .sixth{  float:right;  width:210px;  height:170px;  background-color:#d17466;  }
  .seventh{  float:right;  width:210px;  height:200px;  background-color:#d17466;  }
  </code></pre>