floated DIV's with selects creates empty columns in layout, why? - css

Question

With the code as written below, The DIV containing SELECT 4 is pushed 2 columns to the right, but if I remove all of the SELECTS from the HTML the alignments are stacked one under the other correctly with no skipped columns. - Is there some default CSS applied to a SELECT or something I'm just missing here? Why is this occurring?
<div style="height:300px; text-align:right; padding-right:8px; margin-top:5px;">
<div style="float:left; width:33%;">1: <select name="brands" style="width:65%;">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select></div>
<div style="float:left; width:33%;">2: <input type="text" name="model" style="width:65%;" /></div>
<div style="float:left; width:33%;">3: <select name="type" style="width:65%;">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
</div>
<div style="float:left; width:33%;">4: <select name="caliber" style="width:65%;">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select></div>
<div style="float:left; width:33%;">6: <input type="text" name="accuracy" style="width:65%;" /></div>
<div style="float:left; width:33%;">7: <input type="text" name="finish" style="width:65%;" /></div>
<div style="float:left; width:33%;">8: <input type="text" name="action" style="width:65%;" /></div>
<div style="float:left; width:33%;">9: <input type="text" name="stock" style="width:65%;" /></div>
<div style="float:left; width:33%;">10: <input type="text" name="capacity" style="width:65%;" /></div>
<div style="float:left; width:33%;">11: <input type="text" name="chokes" style="width:65%;" /></div>
<div style="float:left; width:33%;">12: <input type="text" name="chamber" style="width:65%;" /></div>
</div>
When Selects and corresponding DIV's are removed i get this... correctly.

Answer 1

Since it isn't optimal to use inline CSS (via the style attribute), I rewrote everything to keep the HTML separate from the CSS. It's also worth noting that you should wrap the text for the elements in a label element. As you can see, you match the label's for attribute with an id.
As for the question - you simply needed to set a height on the wrapping div elements. The input elements had a height of 24px, and the select elements had a height of 26px. It is typical of floating elements to to break to a new line when the elements have differing heights. A height of 26px would suffice. (working example)
CSS:
form {
height:300px;
text-align:right;
padding-right:8px;
margin-top:5px;
}
form > div {
width:33%;
float:left;
height:26px;
}
form > div > select, form > div > input {
width:65%;
}
Updated HTML
<form>
<div>
<label for="brands">1:</label>
<select id="brands" name="brands">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
</div>
<div>
<label for="model">2:</label>
<input type="text" id="model" name="model" />
</div>
<div>
<label for="type">3:</label>
<select id="type" name="type">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
</div>
<div>
<label for="caliber">4:</label>
<select id="caliber" name="caliber">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
</div>
<div>
<label for="accuracy">5:</label>
<input type="text" id="accuracy" name="accuracy" />
</div>
<div>
<label for="finish">6:</label>
<input type="text" id="finish" name="finish" />
</div>
<div>
<label for="action">7:</label>
<input type="text" id="action" name="action" />
</div>
<div>
<label for="stock">8:</label>
<input type="text" id="stock" name="stock" />
</div>
<div>
<label for="capacity">9:</label>
<input type="text" id="capacity" name="capacity" />
</div>
<div>
<label for="chokes">10:</label>
<input type="text" id="chokes" name="chokes" />
</div>
<div>
<label for="chamber">11:</label>
<input type="text" id="chamber" name="chamber" />
</div>
</form>
Alternatively, you could avoid floating elements and use inline-block level elements; achieving the same effect without having to set a height on the elements.
Example demonstrating this