Edit Question - KnowledgeHub

Title Body

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.

Tags (comma-separated) Cancel