Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to position a liquid/elastic textbox next to a button?

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:

layout
(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?

like image 854
Josef Pfleger Avatar asked Jun 05 '09 16:06

Josef Pfleger


1 Answers

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%; }
like image 156
CAbbott Avatar answered Oct 13 '22 03:10

CAbbott