Div behave incorrectly when “<select>” is used; works fine when “<input>” is used - html

Question

I have code as shown in http://jsfiddle.net/Lijo/PJcZQ/. It has tow divs with similar content “GROUP1” and “GROUP2” – only difference being the following
GROUP 1
<div class="secondTextBox">
<select name="ctl00$detailContentPlaceholder$ddlStatus" id="detailContentPlaceholder_ddlStatus" class="dropdownItem" style="width: 120px;">
</select>
</div>
GROUP 2
<div class="secondTextBox">
<input name="ctl00$detailContentPlaceholder$txtVal2" type="text" id="detailContentPlaceholder_txtVal2" style="width: 120px;" />
</div>
CSS
.searchValuesDiv
{
padding: 10px 0 0 20px;
margin:20px 0 20px 0px;
border:1px solid Cyan;
overflow:auto;
}
Group 1 is not behaving as expected – the div containing the button starts from a wrong position.
Note: This issue is not reproducible while seeing from jsFiddle. This can be reproduced when a HTML page is created with that code.
Why is it behaving so? [Can you explain why it was not a problem when I used "Input" element?]
How can we correct it?

Answer 1

You seem to be using floats. If you want the .btnSearchDiv element to start in a “new line”, just add a overflow: hidden; to the .searchLine elements. Without that, those elements are collapsed because they contain floating elements.

Answer 2

There is a missing float in the .searchLine.. I hope it fix your problem
Change the css to this:
.searchLine
{
float:left;
width:auto;
min-width:700px;
height:auto;
margin:1px 1px 1px 1px;
padding: 0 0 0 0px;
}
or
.searchLine
{
clear:both;
width:auto;
min-width:700px;
height:auto;
margin:1px 1px 1px 1px;
padding: 0 0 0 0px;
}