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/

Answer 1

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