How do I have a textbox be 100% width without moving its siblings to the next line?

I'm interested in having a textbox take up 100% width of the remaining space but without dropping the text "name" or the button to the next line:

<div style="width: 100%; padding: 20px; background-color: #c0c0c0">
    <span>Name:</span>
    <span><input type="textbox" style="width:100%" /></span>
    <span><input type="button"开发者_开发百科 value="Search" /></span>    
</div>

http://jsfiddle.net/GP2nA/1/

How can I prevent the text and button from dropping to the next line?

---

Tested in IE7/8, Firefox, Chrome, Opera.

Live Demo
Live Demo (minus extra wrapper div)

CSS:

#search {
    padding: 20px; background-color: #c0c0c0;
    overflow: auto
}
#search div {
    position: relative
}
.name {
    float: left
}
.input {
    position: absolute;
    top: 0; right: 70px; left:55px;
}
.submit {
    float: right
}

HTML:

<div id="search">
    <div>
    <span class="name">Name:</span>
    <span class="input"><input type="input" style="width:100%" /></span>
    <span class="submit"><input type="button" value="Search" /></span>
    </div>
</div>

(You should have a form and a label tag in there)

---

UPDATED: http://jsfiddle.net/QaWMN/2/

Works in: ie7, ie8, ff, chrome

If you need ie6 read this: http://www.alistapart.com/articles/conflictingabsolutepositions/

html:

<div style="padding: 20px; background-color: #c0c0c0; position: relative;">
    <span class="desc">Name:</span>
    <div class="full">
    <input type="textbox" class="tb"  /></div>
    <input type="button" value="Search" class="button" />
</div>

css:

span {position: absolute;}
.full {position: absolute; left: 60px; right: 100px; top: 8px;}
.desc {left: 10px; top: 8px; width: 100px;}
.tb {width: 100%; display: block;}
.button {right: 10px; width: 80px; top: 8px; position: absolute}

---

You could use something like the following:

<div style="padding: 20px; background-color: #c0c0c0">
    <span style="width:10%;">Name:</span>
    <span><input type="textbox" style="width:80%" /></span>
    <span><input style="width:10%;" type="button" value="Search" /></span>    
</div>

Where we simply give all elements (label, input and button) a percentage of the width to eat. Note that you will need to examine your form elements and adjust the 10% of labels to compensate for that of your widest label, and alter the 80% width of the input field accordingly too.

Also, as commented by another, extract your styles and place them in CSS classes as opposed to writing them inline.

---

It doesn't really quite work that way in css without fancy JavaScript. However, you CAN get the same look to happen with a slight reworking:

<div style="width: 100%; padding: 20px; background-color: #c0c0c0">
<div style="width: 10%; float:left;">
<span>Name:</span>
<span><input type="button" value="Search" /></span> 
</div>
<div style="width: 90%; float:left;"</div>
<span><input type="textbox" style="width:100%" /></span>
</div>
<div style="clear:both;"></div>
</div>

Or easier:

<div style="width: 100%; padding: 20px; background-color: #c0c0c0">
<div style="width: 10%; float:left;">Name:</div>
<input type="textbox" style="width:80% float:left;" />
<input type="button" value="Search" style="width: 10%; float:left;" />
</div>

---

<div style="display: table; width: 100%">
    <div style="display: table-row; padding: 20px; background-color: #c0c0c0">
        <span style="display: table-cell;">Name:</span>
        <input type="textbox" style="display: table-cell; width:100%" />
        <span style="display: table-cell;">
            <input  type="button" value="Search" />
        </span>  
    </div>
</div>

See updated fiddle.

Note: The advantage of using this method is that you won't have to set a width on the label or the button.