title: CSS Responsive Grid - items getting stuck on those with longer height
body: <p>I'm building a portion of a portfolio site that displays a 4-column grid with images and their titles using relative units of measurement so that it scales with the browser window's size. Right now it works fine with each .item assigned a property of float:left and max-widths defined as a percentage of the overall #container's width (in this case 1100px or 68.75em). It works fine with the exception of the titles, which go below each image in a span. When one of the titles is longer than the 220px (or 20% of the container) the height increases and the items in the next row will get "stuck" on it. </p>
  
  <p>I can fix this easily using PHP to insert a clear:both div after every 4th div (to effectively make a new "row" in the html) but I plan on using media queries or some other device to reduce the amount of columns to 3, 2 and 1 as the browser window shrinks. It would be easier if I could simply have the rows defined by floating the items. Possible solutions?</p>
  
  <p>Styles:</p>
  
  <pre><code>body {
  font-size: 100%;
  line-height: 100%;  /* Neat */
  font-family: Helvetica, Arial, sans-serif;
  }
  
  #container {
  max-width: 68.75em;     /* 1100px */
  margin: 40px auto;
  border: 1px solid #000;
  }
  
  .item {
  float: left;
      width: 20%;
  max-width: 20%;
  height: auto;
  padding: 2.5%;
  background-color: #eee;
  }
  
  .item img {
  display: block;
      width: 100%;
  max-width: 100%;
  height: auto;
  }
  
  .item span {
      width: 100%;
  max-width: 100%;
  margin-top: 1em;
  display: block;
  text-transform: uppercase;
  line-height: 1.5em;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="container" class="cf"&gt; &lt;!-- "cf" comes from my reset, it's a clear-fix --&gt; 
    &lt;div class="item"&gt;
      &lt;img src="images/placeholder.png" height="220" width="220" alt="" title="" /&gt;
      &lt;span&gt;A Title that is Slightly Longer than the Others&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="item"&gt;
      &lt;img src="images/placeholder.png" height="220" width="220" alt="" title="" /&gt;
      &lt;span&gt;A Title&lt;/span&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>... (repeat those divs)</p>
  
  <pre><code>&lt;/div&gt;
  </code></pre>