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

You can quickly achieve this effect using a mixture of float and overflow: hidden:

CSS:

ul { 
  list-style: none; 
  padding: 0; }
.btn { float: right; }
.inputbox { 
  padding: 0 5px 0 0;
  overflow: hidden; }
.inputbox input { 
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

Preview (with box-sizing): http://jsfiddle.net/Wexcode/E8uHf/546/

Here is how it looks without box-sizing: http://jsfiddle.net/Wexcode/E8uHf/