title: Non uniform grid float
body: <p>Hey im trying to make a floating grid that has different shapes.</p>
  
  <p><strong>Here is my goal and whats happening:</strong> <a href="http://imgur.com/a/wXQfA">http://imgur.com/a/wXQfA</a></p>
  
  <p>As you can see there is a gap under the horizontal piece.  Im trying to fix it without having to use any positioning so that I can add boxes on later or move them around.</p>
  
  <p>Code: 
  Html
      
      
          </p>
  
  <pre><code>        &lt;li class="mediumBox"&gt;
              &lt;a href="#"&gt;&lt;img src="..." height="205" width="430"&gt;&lt;/a&gt;
          &lt;/li&gt;
  
          &lt;li class="largeBox"&gt;
              &lt;a href="#"&gt;&lt;img src="..." height="430" width="430"&gt;&lt;/a&gt;
          &lt;/li&gt;
  
          &lt;li class="verticleMediumBox"&gt;
              &lt;a href="#"&gt;&lt;img src="..." height="430" width="205"&gt;&lt;/a&gt;
          &lt;/li&gt;
  
          &lt;li class="smallBox"&gt;
              &lt;a href="#"&gt;&lt;img src="..." height="205" width="205"&gt;&lt;/a&gt;
          &lt;/li&gt;
  
          &lt;li class="smallBox"&gt;
              &lt;a href="#"&gt;&lt;img src="..." height="205" width="205"&gt;&lt;/a&gt;
          &lt;/li&gt;
  
          &lt;li class="smallBox"&gt;
              &lt;a href="#"&gt;&lt;img src="..." height="205" width="205"&gt;&lt;/a&gt;
          &lt;/li&gt;
  
          &lt;li class="smallBox"&gt;
              &lt;a href="#"&gt;&lt;img src="..." height="205" width="205"&gt;&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Css:</p>
  
  <pre><code>body{
  background-color: #fffdf9;
  height: 100%;
  width: 100%;
  }
  
  #content{
  background-color: red;
  height: auto;
  width: 900px;
  margin: 5em auto 0 auto;
  }
  
  #work ul{
  list-style: none;
  
  }
  
  #work li{
  float: left;
  margin:  10px;
  }
  
  #work li &gt;a{
  display: block;
  }
  
  #work li .smallBox{
  float: left;
  display: block;
  }
  
  #work li .mediumBox{
  float: left;
  display: block;
  }
  
  #work li .verticleMediumBox{
  float: left;
  display: block;
  }
  
  #work li .largeBox{
  float: left;
  display: block;
  }
  </code></pre>
  
  <p><strong>Here is my code:</strong><a href="http://jsfiddle.net/jw7pV/">http://jsfiddle.net/jw7pV/</a>
  For some reason the jsFiddle version doesn't look like my chrome version.</p>