CSS float, clear a "row" of floating elements - css-float

Question

I want to create a "scorecard" grid to output some data. If the data in each div.item is all the same height, then a simple float left on each div.item gives a nice even layout which scales up and down nicely depending on browser size.
If the data however is variable, a different number of lines in each div, then the way elements float gives an uneven and messy output. See code sample below. If you create a page with the below, resize the browser to about 800px wide so that box 1, 2, and 3 create a "row" on top, followed by 4, 5 and 6. How do I get 7 to drop down to the next line so it creates a row along with 8 and 9?
Obviously if you resize the browser so that 4 divs appear in each row, number 9 is the element I want to break down below 5. Is there something obvious I am missing or do I need to use some Javascript to achieve this?
div.item{
float:left;
width:220px;
background-color:#DBDBDB;
margin:8px;
}
h1, p{
padding:4px;
margin:0;
}
<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>

Answer 1

Change "float: left;" to "display: inline-block; vertical-align: top;"
and it will work the way you want.
Example: http://jsfiddle.net/yK9eY/2/
div.item {
display: inline-block;
*display: inline;
width:220px;
background-color:#DBDBDB;
margin:8px;
vertical-align: top;
zoom: 1;
}
h1, p {
padding: 4px;
margin: 0;
}
<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>
<div class='item'>
<h1>4</h1>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div class='item'>
<h1>5</h1>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>More Content</p>
<p>More Content</p>
</div>
<div class='item'>
<h1>6</h1>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div class='item'>
<h1>7</h1>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div class='item'>
<h1>8</h1>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div class='item'>
<h1>9</h1>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>

Answer 2

Wrap all divs with a container and give .container { overflow: hidden; } or .container { overflow: auto } to it.
The second way is wrap all divs with a container and put another div to bottom of all divs and give a class name such example"clear" and style it .clear { clear: both }