Side-by-side DIVs / static width & varying numbers

How do I elegantly (and reliably) place multiple DIVs next to each other, horizontally, and make them wrap, if necessary, at the same time?

Perhaps I just need a dope slap, but the challenge is to position multiple DIVs side-by-side, and if I run out of available space, the next DIVs should wrap underneath the previous row of DIVs.

Sometimes, I might only have two (2) or three (3) DIVs. Sometimes, I might have as many as 10. Currently, I’ve used a float:left; approach, but it doesn’t quite do the trick.

Although not all columns will have the same height, I still need to have them all in rows.

Here’s what my code currently produces:

This is the HTML:

				<div class="ratingDetails" id="showHideRatings_num01">

					<div class="ratingBoxes">

						<div class="ratingBox">
							<p class="ratingHeader">1: Unacceptable</p>
							<p class="ratingCopy">Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text.</p>
						</div>

						<div class="ratingBox">2: Needs Improvement</div>

						<div class="ratingBox">3: Meets Expectations</div>

						<div class="ratingBox">4: Valued Contributor</div>

						<div class="ratingBox">5: High Performer</div>

					</div>

				</div>

And this is the CSS:

.ratingDetails, .commentDetails {
	width: 909px;
	margin: -5px 1px 10px 30px;
	padding: 0;
/*	border-bottom: #898989 dotted 1px; */
/*	border: #ccc solid 1px; */
}

.ratingDetails p, .commentDetails p {
	color: #363636;
	font-family: Verdana, Tahoma, Arial, sans-serif;
	font-size: 11px;
	font-weight: regular;
	line-height: 15px;
	padding-right: 20px;
/*	margin-right: 20px; */
}

.ratingBoxes {
	position: relative;
/*	border: #000 solid 1px; */
}

.ratingBox {
	float: left;
/*	width: 293px; */
	width: 30%;
	background-color: #eee;
	margin: 0 12px 15px 0;
	padding: 5px;
	color: #363636;
	font-family: Verdana, Tahoma, Arial, sans-serif;
	font-size: 11px;
	font-weight: regular;
	line-height: 15px;
}

.ratingHeader {
	color: #363636;
	font-family: Verdana, Tahoma, Arial, sans-serif;
	font-size: 11px;
	font-weight: bold;
	line-height: 15px;
}

.ratingCopy {
	font-weight: regular;
}


Any suggestions? Links? Ideas?

Use inline-block instead of floating and then the elements won’t snag when wrapping if they are different heights.

IE needs a little hack but it is easy to implement.

Here is an example:

http://www.pmob.co.uk/temp/caption-151.htm

You can read more on inline-block here.