How to stretch the width of an element, so that it's 100% - widths of its siblings?

Question

Say, I have the following unordered list. The button has width: auto. How do I style the elements, so #textField would stretch as much as possible,

Answer 1

Try this:

HTML

CSS

ul li {
    width:100%;
}

#textField, .btn {
    float:left;
}

#textField {
    width:70%;
}

.btn {
    width:auto;
}

Here is a demo:

http://jsfiddle.net/andresilich/RkCvf/

---

Here are a couple of more demos i made for your consideration.

This demo is using CSS3's flex-box model to stretch the input field across its region without a given width. There is no support for IE8 and below though.

---

And this demo imitates a table by only using CSS. It is supported by IE8 and above.