Question

I’m trying to create a small html fragment (a div element) consisted of three parts: a label, textbox, and a button.

Within that div element the label would be on the left (autosized), the button would be on the right (again, autosized) and the textbox should take up all remaining space within the parent div element.

This is what I’ve tried (assuming I want my div to be 400 pixels wide):

<div style="width:400px">
    <div style="float: left">Label</div>
    <input style="width:100%">  <!-- doesn't work -->
    <button type='button' style='float: right'>Click</button>
</div>

The trouble is, my textbox does not get resized automatically. Add ‘width=100%’ to the textbox doesn’t work.

What would be the way to make it take up all remaining space between the label and the button? Ideally it should be done just by applying some styles, not by introducing new elements.

(I guess the issue isn’t related only to div element, but that just happens to be my work scenario.)

Answer 1

Perhaps something like this will be what you want. Yeah I know it’s cheating. And yeah, I agree with @Paul re: label, so i swiped his id. 🙂

EDIT: Obligatory Self-Referencing Demo

Warning: not tested in all browsers.

CSS:

div {
  display: table;
  width: 400px;
  white-space: nowrap;
}

label {
  display: table-cell;
  padding-right: 3px;
  width: 1em;
}

input {
  display: table-cell;
  width: 100%;
}

span {
  display: table-cell;
  padding-left: 6px;
  width: 1em;
}

HTML:

<div>
  <label for="my-very-special-input">Label</label>
  <input id="my-very-special-input"/>
  <span><button type="button">Click</button></span>
</div>