luca luca - 3 months ago 10
CSS Question

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

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

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 key step is using overflow: hidden;: why this is necessary is explained at:

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