Label and input layout using css

Question

I'm trying to line up a label and an input box on the same line in such a way that the label takes up all the space it needs and then the input box uses all of the remaining space. For example if the container was 1000px and the label was 342px then the input should be 658px wide. But if the label changed to 100px the input should resize to 900px. I could do this using a table layout, or using JavaScript to resize the input box when the label width changes but ideally I would like to do this using only css. My html looks like this.

<div id="container">
  <label for="inputBox">variable text</label>
  <input type="text" id="inputBox" />
</div>

Thanks,

Edit: To help illustrate what I'm trying to do here is an example using tables.

<table style="background-color:#ddd;width:500px;">
  <tr>
    <td style="width:0;white-space:nowrap;"><label style="width:100%">text</label></td>
    <td><input style="width:100%" type="text" /></td>
  </tr>
</table>

Answer 1

This CSS should work:

#container  { width: 1000px; white-space: nowrap; }
#inputBox  { width: 100%; }

Of course you can adjust the width of the container to suit your needs.

EDIT: The above CSS expands the inputBox to be 1000px and therefore makes the div width greater than wanted. To achieve the effect you want you can use the overflow property as described in http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/ and a bit of an additional markup:

<div id="container">
  <label for="inputBox">variable text</label>
  <div><input type="text" id="inputBox" /></div>  <!-- Notice the input is wrapped in an additional div -->
</div>

The CSS:

#container  { width: 1000px; white-space: nowrap; }
#container label  { float: left; margin-right: 5px; /* The label must be a floating element, the margin adds a little space to visually separate it from the input field */ }
#container div  { overflow: hidden; /* This does the trick */ }
#inputBox  { width: 100%; }

Answer 2

#container { margin-left: 100px; position: relative; }
#container label { position: absolute; left: -100px; }
#container input { width: 100%; }

(You can use box-sizing and its browser-specific versions to make sure the borders of the input line up nicely if necessary, and if you need that in IE6-7 too, a bunch of padding hacks to accomodate the extra pixels.)

This requires that the size of the label be known. It can't be made to depend on the width of the text content of label (ie ‘shrink-wrap’) without a bunch of extra markup (which wouldn't really be any better than using tables).

When liquid-layout forms get any more complicated than this, you do typically need to go to tables. Traditional CSS positioning isn't great at distributing widths between fixed, liquid, and shrink-wrap contents.

Answer 3

The correct way would be:

#container  { width: 1000px; display: table }
#container label  { display: table-cell; white-space: nowrap; }
#inputBox  { width: 100%; display: table-cell; }

but that won't work in IE 6 or 7.