How to make an input field have 100% width minus the width of the submit button?

Question

I have a very basic single input field with a 'submit' button alongside it. The search button has a fixed width of 104 pixels. Both are wrapped together with total width 50% of the browser viewport. It is my plan to allow the input field to enlarge as the browser window enlarges.

At the moment, for my specific browser window, I am having to fix the width of the input field to spread from the left of the wrapper to the left of the submit button. However, as I resize the window, it (obviously) doesn't adjust accordingly, and hence leaves a white space gap.

I have not found an answer to this question anywhere else. I am well aware that usually a width of 100% with a right padding of 104px will solve this kind of issue with other in-line elements. HOWEVER, the issue here is that the button cannot seem to sit above the padding, and instead moves to a new line.

How may I resolve this? Thanks!

EDIT: Here's what I have so far. Visit jsfiddle.net/nWCT8/ The whole wrapper needs to be centered, and it needs to have majority browser support (although I don't mind if IE6 won't work with it). For this reason, I don't think 'calc' is quite suitable.

Answer 1

Because you have a fixed height, you could use absolute position to achieve this (If you don't require to support IE 6)

EDIT update my answer base on your jsfiddle, but I only could test it in current Chrome, Safari and FF right now.

jsfiddle

To get auto enlarging work proper with FF you need to use a wrapper around it and the input needs to have a width of 100%. To prevent the padding of the input elements to be added to the width the following css rules needs to be use:

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

box-sizing is supported by: IE 8+, Chrome, Opera 7+, Safari 3+, Firefox

EDIT Styling input elements is typically problematic because of their padding and margin. To have the result you want to achieve without the css3 calc feature you need to do the following steps:

1. Define the height to the surrounding .form-wrapper and set its position to relative so that this element is responsible for the position absolute of the elements it contains.

2. Wrap a container (.input-wrapper) around the the input element, defining its position as absolute with left:0px, top:0px, bottom:0px and right:[the width of your button] that way the wrapper always has a distance of the width of the button to the right side.

3. Set the width and height of the input element to 100%. To prevent the padding of the input element to be added to the width you need to set the box-sizing to border-box.

4. Set the position of the button to absolute with top:0px, bottom:0px and right:0 and setting the width to width: [width of your button]

Answer 2

The chosen answer works fine, however, it's overly complicated. Rewrote the answer to be MUCH simpler:

HTML:

<div class="halfWidth">
    <div class="input-wrapper">
        <input type="text" placeholder="Input text here"/>
    </div>
    <button type="submit">Search</button>
</div>

CSS:

.halfWidth {
    width:50%;
}
.input-wrapper {
    margin-right:100px;
}
input {
    float: left;
    width: 100%;
    -ms-box-sizing: border-box; /* ie8 */
    -khtml-box-sizing: border-box; /* konqueror */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    box-sizing: border-box; /* css3 rec */
}

View example at:
http://jsfiddle.net/nWCT8/4/