Input text remaining available space in a div with a button on its right

Question

Is there an easy and elegant way to have an input remaining available space in a div with a button on the right without specifing any width on input neither button ?

<div>
    <input type="text"/>
    <button>button</button>
</div>

It seems easy but i can't find a way to do it ...

here the jsfiddle : http://jsfiddle.net/LLQQQ/

I'm not sure if I understand your question correctly, but can you try input, button { float: left; } — AllisonC, Nov 11 '11 at 16:13
by adding a border on the surrounding div you may see the problem : http://jsfiddle.net/LLQQQ/4/ I'd like the width of the input take the available space its parent have. — Frntz, Nov 11 '11 at 16:26
Try something like this: http://stackoverflow.com/questions/773517/style-input-element-to-fill-remaining-width-of-its-container — AllisonC, Nov 11 '11 at 16:36
if i understood your que correctly, do you want like http://jsfiddle.net/LLQQQ/7/ — Punit, Nov 11 '11 at 17:22
nope input and button on the same line, button with no width set, and an input with auto-width. — Frntz, Nov 12 '11 at 08:53

mrtsherman · Accepted Answer · 2011-11-11T16:56:55.017

You can use display table / table-cell. This is not table-based layout, so people won't flip their lid about it. You set div to display as table, and then use immediate descendants selector > * to make all immediate children to act as cells. Then you can specify widths on cells and they will do their best to take up full width. I had to wrap button in span because otherwise it would shrink.

http://jsfiddle.net/LLQQQ/6/

<div>
    <input type="text"/>
    <span><button>button</button></span>
</div>

div {
    border: 1px solid #000;
    display: table;
    width: 100%;
}

div > * { display: table-cell; }

div > span { width: 1%;  }
div > input { width: 100%; }

Input text remaining available space in a div with a button on its right

1 Answers1