user422039 user422039 - 4 months ago 16
CSS Question

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

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.

wdm wdm
Answer

Edit: Check out the demo for the table-less CSS version (of table behavior)...

Here is a demo: http://jsfiddle.net/wdm954/626B2/4/

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