Select box to fill remaining space

Question

On my form I am trying to have my select box take up the row except enough room to show the button on the same row.

I am after a responsive design, so as I resize the page then of course with size of the select box should resize as well to take into account that size.

I can set a percentage on the select, but as it goes up and down sometimes I end up with a large gap, or the button goes onto a new line.

html

<form class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label" for="droplist">Select item:</label>
        <div class="col-xs-9">
            <select id="droplist">
                <option>Value 1</option>
                <option>Value 2</option>
            </select>
            <button class="btn btn-primary">Action!</button>
        </div>
    </div>
</form>

css
select {
    width: 80%;
}

Is there a way to have both the select and the button on the same line, and the select just resizes with the page?

fiddle; http://jsfiddle.net/sJT6C/

Answer 1

If you insist on the button having fixed width, you can use advanced CSS layouts (flex or grid, now experimental in Firefox) or alter the HTML markup and play with float CSS property as follows.

HTML:

<form class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label" for="droplist">Select item:</label>
        <div class="col-xs-9">
            <button class="btn btn-primary">Action!</button>
            <div class="wrapper">
            <select id="droplist">
                <option>Value 1</option>
                <option>Value 2</option>
            </select>
            </div>
        </div>
    </div>
</form>

CSS:

.wrapper {
    margin-right: 70px;
    margin-top: .5ex;
}
select {
    width: 100%;
}
button {
    float: right;
}

JsFiddle

In the markup, I swapped the select and the button and wrapped the select in a div with class wrapper. The wrapper is needed to get the select to take as much space as possible, without specifying its width. (If width: 100% is specified without a wrapper, there will be no room for the button.)

The stylesheet tells select to stretch to the full width of its parent, which is .wrapper. The wrapper has no width specified, but as a block element it tries to take as much space as possible. Now we have a select that behaves like a well-behaved block element.

Now the floating part. The wrapper is given right margin of the size of button width (including padding and border). It would be best to ensure that the button never exceeds this size, but I did not focus on that. The button is told to float to the right. Thus it fills the space reserved by wrapper’s right margin. (If I did not swap the elements in markup, the button would move down by the height of the wrapper.)

And yeah, I forgot to mention the margin-top: .5ex of .wrapper. Originally select and button used to have their baselines aligned. My hack breaks this alignment and this margin is quite a poor attempt to fix it. Vertical alignment is a darn complicated thing in CSS and I did not find it important enough to really solve it here.