Set the text box and button inside the div

Question

How can I put <input type="text"/> and <input type="button"/> on the same line, for example ...
... so that they fit into their parent (e.g. <div> ), with the text field taking the maximum possible width?

Of course, you can use an additional div . table allowed but not recommended.

Answer 1

Using the tabular approach, you can:

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

An effect is a table that fills its parent width, containing a fixed-width button, next to a text box that fills the remaining width.

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

Edit:

Here's a div based approach:

It so happened that these div-based approaches worked quite well in IE 7 and IE8, but not in 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> 

Strike> I recommend using browser-based testing approaches.