CSS display inputs in-line (last input width:100%)

Question

I need to create a line with a few inputs and to be sure they always fill the div, I've added width:100% to the last input

<div style="width:300px;background:#eee;height:30px">
    <input value="first" style="width:80px" type="button"/>
    <input value="second" style="width:80px" type="button"/>
    <input value="last" style="width:100%" type="button"/>
</div>

This sample is not working fine because the last input width is same as div's and it appears in the second line.

How can I make them all appear in the same line?

Jsfiddle

Answer 1

With a little CSS you can do this. Wrap the last input in a span and add this CSS:

<div style="width:300px;background:#eee;height:30px;">
    <input value="first" style="width:80px" type="button"/>
    <input value="second" style="width:80px" type="button"/>
    <span id="last"><input value="last" style="width:100%" type="button" /></span>
</div>
#last {
    overflow:auto;
    display:block;
}
input {
    float:left;
}

jsFiddle example