title: How to make an input field have 100% width minus the width of the submit button?
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>How may I resolve this? Thanks!</p>
  
  <p>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.</p>