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.

Answer 2

Something like this? fiddle It seems to work with fixed-size button :-) The point is to make space for button with adding margin to wrapper around input...

Answer 3

Found this and it worked great for me. JSFiddle

1. float: right on the button
2. Give the field width: 100% and wrap it in a div with overflow: hidden

HTML

<a href="#" class="search-btn">Search</a>
<div class="search-field-wrap">
  <input class="search-input" type="text" name="search">
</div>

CSS

.search-btn {
    float: right;
}
.search-field-wrap {
    overflow: hidden;
}
.search-input {
    width: 100%;
}

Answer 4

display: flex; can solve much problems without float
See solved by flex layouts http://philipwalton.github.io/solved-by-flexbox/demos/input-add-ons/

Answer 5

Apply a negative top margin on the button: http://jsfiddle.net/t7tgJ/2/

UPDATE:

To accomplish this with the new condition of a fixed button width, float the input to the left and the button to the right. But, you have to apply a clearfix to the form element since it's height collapses with all floated children: http://jsfiddle.net/t7tgJ/3/

Answer 6

Although they all expressed good ideas, I was having trouble getting the various suggestions to look consistant across browsers. After iterating on this a bunch I came up with the following solution which looks good for everything > IE7 and doesn't require any additional containers.

http://jsfiddle.net/tjlahr/hUeZS/

Basically the solution for me was:

1) button { float: right; position: relative; top: -28px; }

2) Use browser resets to cancel some of the extra padding and margins that get added to the button element.

3) Set the height of the input and button to further maintain consistant sizes between browsers.