I want to position a textbox and a button next to each other in an 'elastic' or 'liquid' way (what's the correct term?) like so:
(source: ocactus.org)
When placed in a container of arbitrary width (incl. browser window resizing), the button should right align and take up as much width as it requires while the textbox should use the remaining width. Unfortunately the button's width cannot be fixed in CSS as it depends on the caption (different actions, languages etc.).
What is a good solution for the above that works cross browser?
I was able to get this to work within a table (I know, but it works) where it would correctly handle page resizing as well as the value of the button changing:
<table class="elastic">
<tr>
<td><input class="textbox" type="text"></td>
<td class="button"><input type="button" value="Test Button"></td>
</tr>
</table>
There may be a <div> alternative out there for styling.
EDIT: I revamped my example to use the following style sheet:
.elastic { width:100%; }
.elastic .textbox { width: 100%; }
.elastic .button { width: 1%; }
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