CSS float, clear eine "Zeile" von floating elements

Ich möchte erstellen Sie eine "scorecard" raster output-Daten. Wenn die Daten in den einzelnen div.item alle die gleiche Höhe, dann eine einfache float-Links auf jeder div.item gibt auch einen ganz tollen layout, die Skalen rauf und runter schön je nach browser-Größe.

Wenn die Daten jedoch variabel ist, eine unterschiedliche Anzahl von Zeilen in jedem div, dann ist der Weg Elemente float gibt eine uneinheitliche und unübersichtliche Ausgabe. Siehe code-Beispiel unten. Wenn Sie eine Seite erstellen mit dem unten, die Größe des Browsers auf etwa 800px breit, so dass box 1, 2 und 3 erstellen Sie eine "Zeile" an der Spitze, gefolgt von 4, 5 und 6. Wie bekomme ich 7, drop-down, um die nächste Zeile, so dass es schafft eine Reihe mit 8 und 9?

Natürlich, wenn Sie die Größe des Browsers, so dass 4 divs erscheinen in jeder Zeile, Nummer 9, ist die element-I want to break down unter 5. Gibt es etwas offensichtlich ich vermisse oder brauche ich, um Javascript zu erreichen?

CSS:

div.item{
  float:left;
  width:220px;
  background-color:#DBDBDB;
  margin:8px;
}

h1, p{
  padding:4px;
  margin:0;
}

HTML:

<div class='item'>
  <h1>1</h1>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

<div class='item'>
  <h1>2</h1>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

<div class='item'>
  <h1>3</h1>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>