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

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.

1. Why is it behaving so? [Can you explain why it was not a problem when I used "Input" element?]
2. 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.