CSS Responsive Grid - items getting stuck on those with longer height

Question

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.

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?

Styles:

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;
}

HTML:

<div id="container" class="cf"> <!-- "cf" comes from my reset, it's a clear-fix --> 
  <div class="item">
    <img src="images/placeholder.png" height="220" width="220" alt="" title="" />
    <span>A Title that is Slightly Longer than the Others</span>
  </div>
  <div class="item">
    <img src="images/placeholder.png" height="220" width="220" alt="" title="" />
    <span>A Title</span>
  </div>

... (repeat those divs)

</div>

Answer 1

Possible options:

1. Set the height sufficient to cover two line cases
2. .grid-item { display: inline-block; vertical-align: top; }
3. Change the title span to a div , set height and overflow: hidden

Answer 2

I would suggest giving it a short title. If that's not possible, you could try

.item > span{
    height: 0;
    position: relative;
}

The images will display appropriately, but the too-long titles will display over the image beneath said title. I don't know if this is acceptable for your needs or not, but you may find it useful.