Fit a textbox and a button inside a div

How can I put <input type="text"/> and <input type="button"/> in one line, like this...

...so that they fit inside their parent (开发者_如何学Python<div> for example), with textbox taking maximal possible width?

Of course, additional divs can be used. tables are allowed but discouraged.

Using a table-based approach, you could:

<table cellspacing="0" cellpadding="0" width="100%">
    <tr>
        <td><input type="text" style="width:100%"/></td>
        <td style="width:60px"><input type="button" style="width:100%"/></td>
    </tr>
</table>

The effect is a table that fills its parent width containing a fixed-width button adjacent to a textbox that fills the remaining width.

Of course, out of habit, I would refactor the CSS into an external file.

Edit:

Here's a div-based approach:

It happened to be the case that these div-based approaches worked well enough in IE 7 and IE8, but not Firefox

<div>
    <div style="float:right; width:60px">
        <input type="button" style="width:100%"/>
    </div>
    <div>
        <input type="text" style="width:100%"/>
    </div>
    <div style="clear:both"></div>
</div>

<div>
    <input type="button" style="float:right; width:60px"/>
    <input type="text" style="width:100%"/>
    <div style="clear:both"></div>
</div>

I recommend browser-testing div-based approaches.