How can I put an input element on the same line as its label?

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?

@ShadowWizard I came here looking for a replacement for my javascript solution. — Tomáš Zato, Aug 19 '14 at 05:08

thirtydot · Accepted Answer · 2011-08-04T09:35:25.683

89

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%
}

edited Aug 04 '11 at 09:35

answered Aug 04 '11 at 09:25

thirtydot

224,678
48
389
349

1

The `overflow: hidden` suggestion is pure [block formatting context](http://www.w3.org/TR/CSS21/visuren.html#block-formatting) witchcraft. I love you. I'll never fully understand CSS – mrak Mar 13 '13 at 01:00
1

I just want to add that for this to work, it appears, the element with the float has to appear before the (with the overflow: hidden) in the DOM. This is a wonderful css solution in all though, thanks! – Nisk Mar 25 '13 at 21:37
Is there any specific reason for using a span display:block versus just using a div with overflow:hidden on it? – PJH Apr 18 '13 at 14:46
@PJH: No, not really. Either is fine, it comes down to what you think is more semantic HTML. – thirtydot May 07 '13 at 08:46
The link explaining the `overflow: hidden` magic is down, but future generations can see it [here on Archive](https://web.archive.org/web/20150618153020/http://colinaarts.com/articles/the-magic-of-overflow-hidden/?#making-room-for-floats) – Waldo Hampton Nov 13 '17 at 21:12

score 0 · Answer 2 · edited May 23 '17 at 12:09

That still works for me, but ftr this is how Bootstrap 3 does it (thanks to @morten.c's answer to "Bootstrap full-width text-input within inline-form"). Don't know if it's harder to break than @thirtydot's, or anything. But here it is, and here's a fiddle that also gives a basic example of how to deal with a narrow-screen break point.

HTML:

<form class="responsive">
    <input type="text" placeholder="wide input..."/>
    <span>
        <input type="submit"/>
    </span>
</form>

CSS:

form.responsive, form.responsive * {
    box-sizing: border-box;
    width: 100%;
    height: 40px !important; /* specify a height */
}
form.responsive {
    position: relative;
    display: table;
    border-collapse: separate;

    /* just to be safe */
    border: 0;
    padding: 0;
    margin: 0;
}
form.responsive > input {
    position: relative;
    width: 100%;
    float:left;
    margin-bottom: 0;
    display: table-cell;
}
form.responsive span {
    position: relative;
    width: 1%;
    vertical-align: middle;
    display: table-cell;
}
form.responsive span input {
    margin: 0;
    margin-left: -1px;
    display: inline-block;
    vertical-align: middle;
    overflow: visible;
}

How can I put an input element on the same line as its label?

2 Answers2

Linked