8

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.

DarkOwl
  • 263
  • 1
  • 5
  • 15
  • Do you have set a `height`for the `button` and the `input` or do you need to have a solution that works with the default height, that is set by the system? – t.niese Jul 04 '13 at 18:37
  • The height is fixed at 37px. – DarkOwl Jul 04 '13 at 18:42
  • possible duplicate of http://stackoverflow.com/questions/6938900/css-input-take-remaining-space/27413796#27413796 – henry Dec 11 '14 at 01:19

4 Answers4

9

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]

t.niese
  • 39,256
  • 9
  • 74
  • 101
  • Thank you for trying, but unfortunately this doesn't work for me. It may also be of interest that I need to center the whole wrapper. – DarkOwl Jul 04 '13 at 18:53
  • @DarkOwl edited to have a width of `70%` and center (with demo link). What does not work for you? – t.niese Jul 04 '13 at 18:55
  • Using your jsFiddle link, when I drag to resize the output window, the wrapper resizes but the input field does not. I need the input field to touch against the button. PS. 70% was a bad an example - I'm really using around 50%. – DarkOwl Jul 04 '13 at 19:06
  • @DarkOwl updated that answer one more time ;) please check if the fiddle now works for you i'll add further explanations. – t.niese Jul 04 '13 at 19:32
  • Thanks! That's near-enough perfect. In Firefox, I can see a small, constant gap of approx 5px between the button and the input field, so perhaps we could remove that? – DarkOwl Jul 04 '13 at 19:38
  • @DarkOwl Thats because i set the `right` of `.input-wrapper` to `110px` instead of `104px`. You can change it to have the gap size you want. – t.niese Jul 04 '13 at 19:39
  • Aha, great. This works very nicely. The only changes I can see are the border-box lines. What do they do specifically? EDIT: I've just found out from http://www.w3schools.com/cssref/css3_pr_box-sizing.asp. – DarkOwl Jul 04 '13 at 19:44
  • @DarkOwl added some details, i hope it explains it enough so that you understand what it is done. – t.niese Jul 04 '13 at 19:57
  • That's very clear, thank you. If I could up-vote you twice, I would :) – DarkOwl Jul 04 '13 at 20:02
  • Modified the code in this answer to be much more simple: [jsfiddle.net/nWCT8/4/](http://jsfiddle.net/nWCT8/4/) – Doug S Nov 08 '13 at 20:41
9

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/

Doug S
  • 10,146
  • 3
  • 40
  • 45
6

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

width: calc(100% - 50px); // change 50px to width of button
Zhihao
  • 14,758
  • 2
  • 26
  • 36
0

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

YD1m
  • 5,845
  • 2
  • 19
  • 23