How do I make an input element occupy all remaining horizontal space?

Question

Here's the code:

<div style="width:400px">     some text..     <input type="text" />     <button value="click me" /> </div> 

How can I make the input element expand to fill all the remaining space, while staying on the same line? If I put 100% it goes to a line of its own...

Answer 1

See: http://jsfiddle.net/thirtydot/rQ3xG/466/

This works in IE7+ and all modern browsers.

.formLine {      overflow: hidden;      background: #ccc;  }  .formLine input {      width: 100%;  }  .formLine label {      float: left;  }  .formLine span {      display: block;      overflow: hidden;      padding: 0 5px;  }  .formLine button {      float: right;  }  .formLine input, .formLine button {      box-sizing: border-box;  }

<div class="formLine">      <button>click me</button>      <label>some text.. </label>      <span><input type="text" /></span>  </div>

The button must go first in the HTML. Slightly distasteful, but c'est la vie.

The key step is using overflow: hidden;: why this is necessary is explained at:

• http://colinaarts.com/articles/the-magic-of-overflow-hidden/#making-room-for-floats
• How does the CSS Block Formatting Context work?

The extra span around input is necessary because display:block; has no effect for input: What is it in the CSS/DOM that prevents an input box with display: block from expanding to the size of its container