title: Input text auto width filling 100% with other elements floating
body: <p>i have the following layout for a search box with:</p>
  
  <pre><code>&lt;div id="emulating_variable_width"&gt;
    &lt;form id="srxForm" method="post"&gt;
       &lt;div id="qsrxSearchbar"&gt;            
           &lt;div id="scope"&gt; Person Name &lt;/div&gt;
           &lt;input type="text" id="theq" title="Search"&gt;
           &lt;button id="btnSearch" type="button"&gt;Search&lt;/button&gt;
        &lt;/div&gt;
    &lt;/form&gt;    
  &lt;/div&gt;​
  </code></pre>
  
  <p>(its very much simplified for showing purposes)</p>
  
  <ul>
  <li>The title in the 'scope' is a text that can be variable in length</li>
  </ul>
  
  <p>What i will like is to have the input text element to fill all available space (i.e. yellow space), while keeping the search button at the right.</p>
  
  <p><a href="http://jsfiddle.net/v7YTT/" rel="noreferrer">Full example with the CSS is in a fiddle</a></p>
  
  <p>Which would be the easiest way to accomplish a solution working in IE7+,FF,Safari,etc...  ?</p>
  
  <p>Thanks!</p>