How to make a text entry box take up all remaining space left by the button to its right?

Question

I'm tempting to resort to tables here since I cannot seem to come up with some CSS that will accomplish what I'm trying to create here.

I have a <div> container that contains two things:

• a text entry box (<input type='text' />)
• a button (<input type='button' />)

I want the button right-aligned (I haven't given it a fixed width, but I easily could). The text entry box should be directly left of the button and take up the remaining space. Here is an example of what I'm looking for:

Unfortunately, the following HTML isn't accomplishing this (pardon the inline styles - for demonstration purposes only):

<input type="button" value="Test" style="float: right;" />
<input type="text" style="display: block; width: 100%;" />

I tried adding a <div> wrapper, but that didn't work either. What am I doing wrong? I could accomplish this easily with a <table> layout, but I'm sure I must be missing something and that there is a better way of doing it.

Answer 1

It's possible without <table>, but it's not very obvious.

See: http://jsfiddle.net/thirtydot/wE7jc/2/

<input type="button" value="Test" style="float: right;" />
<div style="overflow: hidden; padding-right: 8px">
    <input type="text" style="width: 100%;" />
</div>

The reason this works is explained here.

Answer 2

As long as you don't mind a fixed width button, this should do:

http://jsfiddle.net/4WghJ/

Basically just wrapped the input in a div with a right margin to compensate for the button.