当选择是行中的最后一项时，浮动Divs无法正确换行

Question

I am floating divs that contain either a textbox or select element. I want the divs to wrap to the next line when it runs out of space. This works fine when the last element of the line is a text box, but not when its a select. You can resize your browser to see the result.

example html:

<div style="display:block;float:left;padding-right:5px;vertical-align:bottom;padding-bottom:2px;">
  <span>Text1</span>
  <br>
  <input id="TextBox" type="text" tabindex="-1" size="3" value="1">
</div>    

JS Fiddle: http://jsfiddle.net/NsxJM/

Answer 1

If you are open to suggestions you can do this with display: inline property.

FIDDLE

Eg HTML

<div class="wrapper">
  <label for="one">Text</label><br/>
  <input id="one" type="text" value="1" />
</div>

<div class="wrapper">
  <label for="tow">Text</label><br/>
  <input id="two" type="text" value="2" />
</div>
<div class="wrapper">
  <label for="three">Text</label><br/>
  <input id="three" type="text" value="3" />
</div>

<div class="wrapper">
  <label for="four">Text</label><br/>
  <input id="four" type="text" value="4" />
</div>

<div class="wrapper">
  <label for="five">Text</label><br/>
  <input id="five" type="text" value="5" />
</div>

<div class="wrapper">
  <label for="sel">*Select</label><br/>
  <select id="sel">
    <option>--Select--</option>
    <option>1</option>
    <option>2</option>
  </select>
</div>

<div class="wrapper">
  <label for="six">Text</label><br/>
  <input id="six" type="text" value="6" />
</div>

<div class="wrapper">
  <label for="seven">Text</label><br/>
  <input id="seven" type="text" value="7" />
</div>

Eg CSS

.wrapper{
  display: inline-block;
  *display: inline;
  zoom: 1;
}

  input[type='text']{
  width: 50px;
}

Answer 2

The problem is with the height of the div that contains the <select>

All the divs with text boxes has height 46px but the one with select list has height 44px. If you assign it 46px height inline, the issue will be resolved.

See working fiddle