div issue while displaying values

i have one text box,if i press any alphabet it will display best match to that alphabet in div tag, problem is i have button which is exactly below to textbox when drop down comes button moves to the bottom,i dont want to move my button when list displays can any body tell me how to achieve this code:

<table border="0" width="300"  cellspacing="0" cellpadding="0" datasrc="#Header">
    <tr>
        <td id="txt" >
            <INPUT TYPE="text" name="text1" id="text1"  size=36 maxlength=255 style="font-family: Arial; font-size: 13px; color: #808080" 
            value="Type your Search Here" onfocus="this.value= (this.value=='Type your Search Here') ? '' : this.value"  
            onKeyUp="doSuggest(this.value,event.keyCode);"/>            
            <div id = "theResults" style ="width:22em;border:0px black solid;padding-left:0px;padding-right:0px;visibility:hidden;"/>

             </div>
                <!-- inner html goes here -->
            <input type="hidden" name="id1" id="id1"/>          
        </td>

    </tr>

   <!--<tr><td> <INPUT type="text" size="50" id="text1" name="text1" value=""  onKeyUp="doSuggest(this.value,event.keyCode);"/></td></tr>-->
   <tr>
        <td>
            <input type="button" name="btn" id="btn" value=开发者_JAVA百科"show selected" 
            onclick='alert("selected values "+document.getElementById("text1").value+","+document.getElementById("id1").value);'/>
        </td>
   </tr>

</table>  

Without seeing anything off your markup: try position: absolute in your CSS.