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

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

...