Having issues positioning a select over a search bar

I've got the following...

<td class="lst-td" width="100%" style="">
   <div style="position:relative;zoom:1">
      <input    autocomplete="off" class="lst" type="text" name="q" maxlength="2048" value="" title="Search" spellcheck="false" tabindex="1">
      <span id="tsf-oq" style="display:none">
      </span>
   </div> 
  </td>

<select id="menu" class="InPage " tabindex="2" style="position: relative; float: right;">
   <option value=9999>"a value</option>
</select>

Currently the select just displays next to the td which is a search bar rather than letting the search bar expand across the page and simply displaying within it (to the right hand side) how do I fix this?

Unsure of exactly what you are looking for but from what I can gleen you want a input with a select on top of it.

To do this set a div to position:relative and put the select and input inside it. Then set the input to width:100% and the select to position:absolute and top:0px; right:0px;

see http://jsfiddle.net/L593G/7/ for an example of this working.

From here you can use top and right to control the positioning of the select and the width of the div to control the width of the whole control.

This technique is called Relatively Absolute positioning and more information can be found here http://css-tricks.com/absolute-positioning-inside-relative-positioning/

Hope this helps :-)

float:left on both the <div> and <select>

See my example on jsfiddle - http://jsfiddle.net/Gpy9Y/

Oh and why are you using tables? NO NO NO NO!!!

Update (@15:28 GMT):

div{float:left; width:100%;}
div input{width:100%;}
select{position:relative; top:-20px; left:4px;}

You should use @Michael Allen example. But if you must stick with your current mark-up, this will work. http://jsfiddle.net/Gpy9Y/5/