luca luca - 2 months ago 5x
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" />

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...


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>

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