HTML - I need a Button, Label and TextBox with this last one AUTO RESIZE in WIDTH when resizing the browser

I want to have a SEARCH div where I have a:

1) Button

2) Label

3) TextBox

MY GOAL:

The edit Box should automatically resize to it's MAX WIDTH by default and whenever I physically resize the browser page, without moving down !!!

I'm not even sure this is something you will want to use a DIV but here is what i have tried (and failed):

<div id="search">    
   <div id="searchbtn">
      <input id="btnSeach" type="button" value="Search" /> 
      Search:  
   </div>
   <div id="searchtxt">
       <input id="txtSearch" name="txtSearch" type="text" value="" /> 
    </div>
</div>

The CSS looks like this:

div#search
{
   height: 30px;
   border: 1px solid #80808D;
   padding: 5px 0px 5px 0px;
}

div#searchbtn
{
   float: left;
   display: inline;
   padding: 0px 10px 0px 10px;
}

div#searchtxt
{
   float: left;
   width: auto;
   display: inline;
   padding-right: 10px;
}

I was hoping that the width: auto meant the div would auto-expand (rsss).

I tried putting a width of 90% on the TextBox but i开发者_如何转开发t never works well when resizing.

I tried putting some width on the div searchtxt but again didn't work properly when resizing.

If using div is the way forward, what would be the right CSS for the various DIVs?

If this is NOT the way ...then what other way would work better?

Thanks.

Using some display: trickery...

Live Demo (Only tested in FireFox 3.6.x)

<style type="text/css">
div#search {
   border: 1px solid #80808D;
   display: table;
   height: 30px;
   padding: 5px 0px 5px 0px;
}

div#searchbtn {
   padding: 0px 10px 0px 10px;
   white-space: nowrap;
}

div#searchtxt {
   display: table-cell;
   padding-right: 10px;
   width: 100%;
}
input#txtSearch {
   width: 100%;
}
</style>

<div id="search">
   <div id="searchbtn">
      <input id="btnSeach" type="button" value="Search" />
      Search:
   </div>
   <div id="searchtxt">
       <input id="txtSearch" name="txtSearch" type="text" value="" />
    </div>
</div>

Note: Internet Explorer 8 (and higher) supports the property values "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group", and "inherit" only if a !DOCTYPE is specified.

Have you tried adding a min-width + % width to the div and then add width:100% to the input?

http://jsfiddle.net/jordanlewis/HtevS/

Ok, I've found another method which would keep everything on the same line:

http://jsfiddle.net/jordanlewis/jtNEa/

HTML

<div id="search">
    <input id="btnSeach" type="button" value="Search" />
   <label for="txtSearch">Search</label>
   <input type="text"  name="txtSearch" id="txtSearch" />

CSS

#search {
    display:table;
    width: 100%;
}

label {
    padding-right:10px;
}

input {
  display:table-cell;
  width:95%;
}

label {
    display:table-cell;
    width:10px ; 
}

If you use CSS, you could have padding left and right so it would expand.