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

score 56 · Accepted Answer · edited May 23 '17 at 11:53

56

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:

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

edited May 23 '17 at 11:53

Community

1
1

answered Aug 25 '11 at 12:26

thirtydot

224,678
48
389
349

There's your +1 I promised yesterday :) – Mathew Thompson Apr 21 '12 at 14:39
`box-sizing` is not supported by IE7 and below. – pixelfreak Dec 07 '12 at 22:11
@pixelfreak: True, but the use of `box-sizing` here is not strictly necessary, so it doesn't really matter. – thirtydot Dec 07 '12 at 23:17
Very helpful! Why is it that the button must go first? – Thomas David Baker May 14 '13 at 17:54
@ThomasDavidBaker: The element that's floated right must be before the element with overflow hidden, otherwise it breaks. – thirtydot May 16 '13 at 12:52
@thirtydot Haha, sorry I wasn't very clear. I understand that it's necessary to work. I was curious as to *why* it was necessary. – Thomas David Baker May 17 '13 at 23:24
Vertical alignment of the label anyone? – simbolo May 27 '13 at 23:17
1

@thirtydot `overflow:hidden` seems to be doing a big part of the magic, otherwise the block element would move to the next line. Any explanation for this? thx – Adriano Jan 30 '14 at 11:23
1

@AdrienBe: [Here you go.](http://colinaarts.com/articles/the-magic-of-overflow-hidden/#making-room-for-floats) – thirtydot Jan 30 '14 at 12:21
Just out of curiosity, isn't a `` with `display: block;` functionally identical to a `
`? The example you have seems to work with either, at least in chrome, opera and firefox (I don't have IE installed).
– Fake Name Apr 26 '14 at 11:54
@FakeName: Yes, they are the same. Take your pick. – thirtydot Apr 26 '14 at 12:55
I wanted to avoid a flexbox approach as I thought "that's too much for just that", but this is even more cumbersome ! – Antonello May 09 '15 at 19:41
@rvighne: I like the edit, but you removed the note about the `button` having to go first in the HTML. People inevitably try to move the `button` to the end, then become confused when it doesn't work. – thirtydot Aug 16 '16 at 07:33
@thirtydot Whoops, sorry about that. I missed it because it was between two code blocks :) – rvighne Aug 16 '16 at 14:29

score 4 · Answer 2 · edited Aug 28 '12 at 20:03

If you want a cross-browser decision you can use table

<table>
  <tr>
    <td>some text</td>
    <td><input type="text" style="width:100%" /></td>
    <td><button value="click me" /></td>
  </tr>
</table>

If you can't use table it would be more difficult. For instance, if you know exactly the width of the some text you can try this way:

<div style="padding:0px 60px 0px 120px;">
  <div style="width:120px; float:left; margin:0px 0px 0px -120px;">some text</div>
  <input type="button" style="width:50px; float:right; margin:0px -55px 0px 0px;" />
  <input type="text" style="width:100%;" />
</div>

score 0 · Answer 3 · answered May 09 '15 at 19:58

If you don't care about old browsers support (IE <= 9) use a flexbox layout:

div{
  background-color: red;
  display: flex;
  display: -webkit-flex;
  display: -ms-flex;
  display: -moz-flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
}
div input {
    flex: 1;
    -webkit-flex:1;
    -ms-flex: 1;
    -moz-flex: 1;
    min-width: 200px;
}

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

3 Answers3

Linked