Stacking content vertically and horizontally with inline-block and float left

So I'd like to stack items vertically within a div and stack multiple divs horizontally like the following illustration:

Each div is defined with a class name of floatbox

<!-- language: lang-html -->

<div class="floatbox">
    <label>Screening Type:</label>
    <select></select>
</div>

For which I was applying the following css

<!-- language: lang-css -->

.floatbox {
    display: inline-block;
    width: 175px;
    margin: 0;
    padding-top: 5px;
    float: left;
}

I need float because IE8 will treat it as a block level element unless you use float. However, when I add it, the items get shifted around. I can correct this by adding two extra <br\> elements, but I'm wondering if that's the best sollution

See this fiddle for an example

the problem is that not all the floatbox elements have the same height, so you can fix it by giving them one:

.floatbox {
	...
	height:45px;
	...
}

works well with your jsfiddle example.

another way to force a 'line break' with floating elements is using the css clear property:

<div style="clear:both"></div>

put this after every 4th div box to ensure that it will break there. then you dont have to use a fixed height, and you can remove all <br> tags from the code (for both solutions)