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 div
s can be used. table
s 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>
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With