How to make element fill remaining width, when sibling has variable width?

css, forms, layout

Solution

Updated demo (tested fine in IE7/8/9/10, Firefox, Chrome, Safari)

- Float the left and right elements.

- In the HTML source code, put both of the floated elements first (this is the most important part).

- Give the middle element `overflow: hidden;` and an implict width of `100%`.

- Give the text box in the middle element a width of `100%`.

.category_dropdown_container {
    float: left;
}

input[type="submit"] {
    float: right;
    ...
}

.resizable_text_box {
    padding: 0 15px 0 10px;
    overflow: hidden;
}
.resizable_text_box input {
    width: 100%;
}

<div class="category_dropdown_container">
    <select class="chosen chzn-done" name="question[category_id]" id="selQJK">
        ...
    </select>
</div>

<input name="commit" type="submit" value="Ask!" />

<div class="resizable_text_box">
    <input id="question_text_box" name="question[what]"
           placeholder="Write a query..." type="text" />
</div>

Problem

In the example below: I want the textbox to fill all available space. The problem is the dropdown width cannot be fixed, since its elements are not static. I would like to solve this with just css (no javascript if possible). I have tried the solutions proposed to similar questions without any luck :( Here is the fiddle: http://jsfiddle.net/ruben_diaz/cAHb8/ Here is the html: ``` <div id="form_wrapper"> <form accept-charset="UTF-8" action="/some_action" method="post"> <span class="category_dropdown_container"> <select class="chosen chzn-done" name="question[category_id]" id="selQJK"> <option value="1">General</option> <option value="2">Fruits</option> <option value="3">Ice Creams</option> <option value="4">Candy</option> </select> </span> <span class="resizable_text_box"> <input id="question_text_box" name="question[what]" placeholder="Write a query..." type="text" /> </span> <input name="commit" type="submit" value="Ask!" /> </form> </div> ``` And here the css: ``` #form_wrapper { border: 1px solid blue; width: 600px; padding: 5px; } form { display: inline-block; width: 100%; } .category_dropdown_container { } .resizable_text_box { border: 1px solid red; } input[type="text"] { } input[type="submit"] { background-color: lightblue; width: 80px; float: right; } ```

Original source