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.

Hagerty

Does the button have to have a fluid width as well, based on its value? – Metaphosphate

The value of the button won't change, so assume its a fixed size. – Hagerty

Answer 1

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.

Hagerty

Thanks @Thomas. I know no-one likes tables. But why not use one here? see adapted fiddle here: jsfiddle.net/hUeZS/143 (quick and dirty) – Aerometeorograph

the text goes below the button – Penology

Answer 2

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.

Echeverria

Answer 3

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...

Td

I like this idea. I tweaked your fiddle a little bit so that the form field and button are flush. jsfiddle.net/tjlahr/t7tgJ/6. However, the button is 2px too low in IE8 and IE9 and the layout breaks in IE7. Not the end of the world, but I'd like to find something that works cross browser, as least > IE7. – Hagerty

Answer 4

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%;
}

Wombat

Answer 5

Adapted thomas fiddle just with a small change

http://jsfiddle.net/hUeZS/147/

Instead of using top: -28px, try margin-top: -28px. This is in my case better because the element under it still get the full width and won't be affected.

...

form button {
    /* style */
    background-color: lightblue;
    border: none;
    padding: 7px;

    /* to match input height above */
    height: 28px;

    /* removes the box from DOM */
    float: right;

    /* alternative to negative margin-top,
    which seems to hide my button behind the input */
    position: relative;
    top: 0px;
    margin-top: -28px;
}

...

Emmalynne

Answer 6

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/

Menology

Answer 7

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

Roaster