title: One list, simple float left, different cell sizes
body: <p>I have a nice challenge for you. Here you have the next code (live example: <a href="http://inturnets.com/test/test.html" rel="nofollow noreferrer">http://inturnets.com/test/test.html</a>):</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;title&gt;&lt;/title&gt;
  &lt;style type="text/css"&gt;* {
          margin: 0;
          padding: 0;}a, a:hover {
          text-decoration: none;
      }
      .grid {
          width: 984px;
          margin: 0 auto;
          list-style: none;
          height: 666px;
      }
      .grid li {
          float: left;
          position: relative;
      }
      .small + .small {
          position: relative;
          clear: left;
      }
      .large, .large a {
          width: 393px;
          height: 222px;
      }
      .small, .small a {
          width: 198px;
          height: 111px;
      }
      .small a, .large a {
          display: block;
          cursor: pointer;
          color: #fff;
      }
      .overlay {
          background: #000;
          width: 100%;
          height: 22px;
          color: #fff;
          opacity: 0;
          position: absolute;
          top: 0;
      }
      &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
      &lt;ul class="grid"&gt;
        &lt;li class="item small"&gt;&lt;a href="#" title="Title 1"&gt;&lt;div class="overlay"&gt;Title 1&lt;/div&gt;&lt;img src="img/squares.png" border="0" width="198" height="111" /&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li class="item small"&gt;&lt;a href="#" title="Title 2"&gt;&lt;div class="overlay"&gt;Title 2&lt;/div&gt;&lt;img src="img/space.png" border="0" width="198" height="111" /&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li class="item large"&gt;&lt;a href="#" title="Title 3"&gt;&lt;div class="overlay"&gt;Title 3&lt;/div&gt;&lt;img src="img/arch.png" border="0" width="393" height="222" /&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li class="item large"&gt;&lt;a href="#" title="Title 4"&gt;&lt;div class="overlay"&gt;Title 4&lt;/div&gt;&lt;img src="img/tree.png" border="0" width="393" height="222" /&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li class="item large"&gt;&lt;a href="#" title="Title 5"&gt;&lt;div class="overlay"&gt;Title 5&lt;/div&gt;&lt;img src="img/arch.png" border="0" width="393" height="222" /&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li class="item large"&gt;&lt;a href="#" title="Title 6"&gt;&lt;div class="overlay"&gt;Title 6&lt;/div&gt;&lt;img src="img/tree.png" border="0" width="393" height="222" /&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li class="item small"&gt;&lt;a href="#" title="Title 7"&gt;&lt;div class="overlay"&gt;Title 7&lt;/div&gt;&lt;img src="img/squares.png" border="0" width="198" height="111" /&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li class="item small"&gt;&lt;a href="#" title="Title 8"&gt;&lt;div class="overlay"&gt;Title 8&lt;/div&gt;&lt;img src="img/space.png" border="0" width="198" height="111" /&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li class="item large"&gt;&lt;a href="#" title="Title 9"&gt;&lt;div class="overlay"&gt;Title 9&lt;/div&gt;&lt;img src="img/tree.png" border="0" width="393" height="222" /&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li class="item small"&gt;&lt;a href="#" title="Title 10"&gt;&lt;div class="overlay"&gt;Title 10&lt;/div&gt;&lt;img src="img/squares.png" border="0" width="198" height="111" /&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li class="item small"&gt;&lt;a href="#" title="Title 11"&gt;&lt;div class="overlay"&gt;Title 11&lt;/div&gt;&lt;img src="img/space.png" border="0" width="198" height="111" /&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li class="item large"&gt;&lt;a href="#" title="Title 12"&gt;&lt;div class="overlay"&gt;Title 12&lt;/div&gt;&lt;img src="img/arch.png" border="0" width="393" height="222" /&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p><strong>Tasks:</strong></p>
  
  <ul>
  <li>one single list (ok)</li>
  <li>simple float:left for the LI's (ok)</li>
  <li>align the cells like on the next picture (not yet done)</li>
  </ul>
  
  <p><img src="https://i.stack.imgur.com/tNpKP.jpg" alt="enter image description here"></p>
  
  <p><strong>Tips:</strong></p>
  
  <ul>
  <li>as you see the second .small class has position relative</li>
  <li>you don't need anything special on the second small one</li>
  <li>you need to do some other things</li>
  <li>so you then need to push the item back into it's correct position</li>
  <li>and then you need to fix the empty space it leaves</li>
  </ul>