Question

I would like to put a label and an input[type=text] on the same line, and I would like for the input‘s width to fill the remaining width of the containing element, regardless of the length of the label’s text (see first image).

I tried to use width: auto; for the input, but it seems to have a static width. I also tried width: 100%;, but that moves the input to a new line (see second image).

How can I achieve this using CSS?

Answer 1

It’s possible without JavaScript, see: http://jsfiddle.net/Khmhk/

This works in IE7+ and all modern browsers.

HTML:

<label for="test">Label</label>
<span><input name="test" id="test" type="text" /></span>

CSS:

label {
    float: left
}
span {
    display: block;
    overflow: hidden;
    padding: 0 4px 0 6px
}
input {
    width: 100%
}

The reason why overflow: hidden is so magically useful in this instance is explained here.

---

display: table-cell is another option, see: http://jsfiddle.net/Khmhk/1/

This works in IE8+ and all modern browsers:

HTML:

<div class="container">
    <label for="test">Label</label>
    <span><input name="test" id="test" type="text" /></span>
</div>

CSS:

.container {
    display: table;
    width: 100%
}
label {
    display: table-cell;
    width: 1px;
    white-space: nowrap
}
span {
    display: table-cell;
    padding: 0 0 0 5px
}
input {
    width: 100%
}