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

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;
}