Question

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

…so that they fit inside their parent (<div> for example), with textbox taking maximal possible width?

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

Answer 1

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>

And, perhaps, a lighter div-based approach:

<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.