CSS: fluid text input with floated-right button

Question

I'm trying to create a fluid text input with a submit button to its right. The input and the button should fill 100% of its container.

Here is an approximation of what I'm trying to achieve: http://jsfiddle.net/t7tgJ/

The problem I'm running into to is, in order to have the input fill its container I need to give it a fluid width, like 100%. However if I float the button right, I'll need to bump down that width to something like 90% so that the button can fit. But this only works for one viewport size.

What I want is something like

input { width: 100% - {button.width}; }
button { float: right; }

or, in plain english, my input should extend up to the right-floated button and remain that way at any viewport size.

Answer 1

I think there are 2 solutions to your problem.

1) You can use display: flex on a container element and flex-grow: 1 on your input. Here is a codepen

2) You can use overflow: hidden trick from this post. Though you'll have to use additional wrapper on your input field.