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

Question

I have a very basic single input field with a 'submit' button next to it. The search button has a fixed width of 104 pixels. Both are wrapped with a total width of 50% of the browser viewport. This is my plan to increase the input field while enlarging the browser window.

Currently, for my specific browser window, I need to fix the width of the input field to spread it to the left of the cover to the left of the submit button. However, changing the size of the window, it (obviously) is not adjusted accordingly and, therefore, leaves a space in the gap.

I did not find the answer to this question elsewhere. I am well aware that usually a 100% width with the correct complement of 104px will solve this issue with other inline elements. HOWEVER, the problem here is that the button cannot seem to sit above the add-on and instead moves to a new line.

How can i solve this? Thanks!

EDIT: That's what I still have. Visit jsfiddle.net/nWCT8/ The whole shell should be focused, and it requires support for most browsers (although I do not mind if IE6 does not work with it). For this reason, I do not think calc is a good fit.

Answer 1

Since you have a fixed height, you can use absolute to achieve this (if you don't need IE 6 support)

EDIT update the response database on your jsfiddle, but I can only check it in the current browsers Chrome, Safari and FF.

jsfiddle

To automatically increase work with FF, you need to use a wrapper around it, and input should be 100% wide. To prevent the addition of input elements that need to be added to width , you must use the following CSS rules:

 -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 supported: IE 8+, Chrome, Opera 7+, Safari 3+, Firefox

EDIT input style elements are usually problematic due to their padding and margin . To get the result that you want to achieve without the css3 calc function, you need to follow these steps:

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

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

• Set the width and height of the input element to 100% . To prevent the input element from being added to add to width , you need to set box-sizing to border-box .

• Set the button - absolute position using top:0px , bottom:0px and right:0 and set the width width: [width of your button]

Answer 2

For newer browsers that support CSS3, you can use calc() :

 width: calc(100% - 50px); // change 50px to width of button 

Answer 3

The selected answer works fine, but it is too complex. Rewritten the answer was 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 */ } 

See an example:
http://jsfiddle.net/nWCT8/4/

Answer 4

html:

 <div> <input type="text" id="search" /> <input type="button" value="Search" id="button" /> <br class="clear: both;" /> </div> 

CSS

  * { padding: 0; margin: 0; } div { width: 70%; margin: 0 auto; padding: 5px; background: grey; } #search { width: calc(100% - 110px); float: left; } #button { width: 104px; float: left; } 

jsfiddle