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, so the width of #textField and the button would add up to 100%? I.e. #textField's width == (100% of width) - (button's computed width).

<ul>   <li>     <input id="textField" type="text" /><input type="button" />   </li> </ul> 

So, for example, let's say 100% width of li is 100 pixels: if the button's computed width is 30px, #textField's width would be 70px; if button's computed width is 25px, #textField's width would become 75px.

Answer 1

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

<ul>     <li>         <input class="btn" type="button" value="Submit"/>         <div class="inputbox"><input id="textField" type="text" /></div>     </li> </ul> 

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/