How to make parts of a div element resize automatically?

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

Hi there,

The only way I could think of making this work was with percents. I enclosed everything in seperate divs (probably uneccesary) and then assigned percentages to each div. Take a look:

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

It's by no means a perfect solution, but hopefully it will suit your needs to some extent.

Elliott

Answer 2

Does it help if you wrap the <input> in a <div> with overflow: hidden?

<div style="width: 400px;">
    <div style="float: left;">Label</div>
    <div style="overflow: hidden;">
        <input style="width: 100%;">
    </div>
    <button type="button" style="float: right;">Click</button>
</div>

See http://stackoverflow.com/questions/2198116/xhtml-css-how-to-make-inner-div-get-100-width-minus-another-div-width/2251833#2251833.

And although it’s off-topic, please note that your label should be, well, a <label>.

<div style="width: 400px;">
    <label for="my-very-special-input" style="float: left;">Label</label>
    <div style="overflow: hidden;">
        <input id="my-very-special-input" style="width: 100%;">
    </div>
    <button type="button" style="float: right;">Click</button>
</div>

Answer 3

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>