title: Image Tiling with pure CSS
body: <p>I am trying to tile images in a grid-like system where there is no spacing between any of them.  Is it possible to do without javascript if you can't control the order of the images in the DOM?</p>
  
  <p>You obviously can't just float the containers because there will be gaps <strong>if your images are not all the same size.</strong></p>
  
  <p><a href="http://jsfiddle.net/bzCNb/3/" rel="nofollow">http://jsfiddle.net/bzCNb/3/</a></p>
  
  <pre><code>.wrapper
  {
      width:400px;
  }
  
  /* One grid unit */
  .box1
  {
      float:left;
      overflow:hidden;
      height:100px;
      width:100px;
  }
  
  /* 2x bigger than a box1, takes up 4 grid units */
  .box4
  {
      float:left;
      overflow:hidden;
      height:200px;
      width:200px;
  }
  </code></pre>
  
  <p>The first three rows behave properly because of the order of the elements in the DOM.</p>
  
  <p><strong>I'm guessing its not possible without javascript.  Hopefully I am wrong. =)</strong></p>