How to make text input box to occupy all the remaining width within parent block?

Question

How do achieve the following:

┌────────────────────parent────────────────────┐
│ label [text-box                   ] [button] │
│ paragraph                                    │
└──────────────────────────────────────────────┘

• label is aligned to the left
• button is aligned to the right
• text-box occupies all remaining width within parent
• paragraph is aligned to the left, must be left-aligned with label too

Both label and button should obey font properties defined elsewhere as maximum as possible. parent is center-aligned within window, and, naturally, can have arbitrary width.

Please advise.

Answer 1

Updated [Oct 2016]: Flexbox version...

form {
  display: flex;
}
form input[type="text"] {
  flex: 1;
}

<form>
  <label>Name</label>
  <input type="text" />
  <button>Submit</button>
</form>
<p>Lorem ipsum...</p>

Original answer [Apr 2011]: Table-less CSS version (of table behavior)...

<div id="parent">
    <div id="inner">
        <label>Name</label>
        <span><input id="text" type="text" /></span>
        <input id="submit" type="button" value="Submit" />
    </div>
    <p>some paragraph text</p>
</div>

CSS...

#inner {
    display: table;
    width: 100%;
}
label {
    display: table-cell;
}
span {
    display: table-cell;
    width: 100%;
    padding: 0px 10px;
}
#text {
    width: 100%;
}
#submit {
    display: table-cell;
}

Demo: http://jsfiddle.net/wdm954/626B2/4/

Answer 2

I don't like first answer with the "table-less" version that actually uses table-cell. Nor the second answer that uses actual tables. Nor third answer that uses hardcoded widths. Here is solution using flex. It is by far simplest:

#parent {
  display: flex;
}
input {
  flex: 1;
}

<div id="parent">
  <label>Name</label>
  <input type="text" />
  <button>Button</button>
</div>
<div>paragraph</div>

Answer 3

Use tables. :D I know people tend to hate tables, but they will work in this situation...

<div id="parent">
    <table style="width:100%">
        <tr>
            <td>label</td>
            <td style="width:100%">
                <input type="text" style="width:100%">
            </td>
            <td>
                <button>clickme</button>
            </td>
        </tr>
    </table>
</div>

Answer 4

Don't forget, you can use calc(). Let's assume total of width used by label and button is 100px (including margin), then the width is:

.text-box {    
  width: calc(100% - 100px);
}

If you think it doesn't support a lot of browser, well you are wrong indeed. It supports a lot now. Time has changed

Answer 5

The only way I know how to achieve this or similar, is to have the "text-box" as a block element that would automatically fill the entire width of the parent, then apply padding to the left and right equal to the total width of the containers on the left and right. Then make the "label" and "button" elements have their position set as relative and float them to where they need to be (float: left, float: right).

Something like,

HTML:

<div id="parent">
    <div id="label">label</div>
    <div id="button">button</div>
    <div id="text-box">
        text<br />
        text<br />
        text<br />
        text<br />
        text
    </div>
</div>

CSS:

div#label
{
    position: relative;
    float: left;
    width: 200px;
    background: #F00;
}

div#button
{
    position: relative;
    float: right;
    width: 120px;
    background: #0F0;
}

div#text-box
{
    padding-left: 200px;
    padding-right: 120px;
    background: #00F;
}

If the button and label elements don't need to have a set width, all elements could just have their width as a percentage value (all adding up to 100%).

Answer 6

It works without flex and tables if assign float: right and put the button (or several buttons in reverse order) before the input box.

Then place the label with float: left, give the input box 100% width and wrap it inside a span with display: block and overflow: hidden.

No magic involved:

<div style="width:100%">
  <button style="float:right">clickme 2</button>
  <button style="float:right">clickme 1</button>
  <label style="float:left">label</label>
  <span style="display:block;overflow:hidden">
    <input type="text" style="width:100%"/>
  </span>
</div>

The basic idea that all right side buttons are specified before the input box in the reverse order.