Select box to fill remaining space

css, html

Solution

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.

Problem

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/

Original source