Text input and button input in the same line

Question

I would like to create a div that contains a text input and a button input on the same line.

The width of the div will be set by me. These two inputs have to fill the div in the way that the button input's width is to be set by it's value, and the rest of the space to be filled by the text input.

I want something like:

<div style="width: 300px; background-color: orange">
    <input type="text" />
    <input type="button" value="Save" />
</div>

Sorry for my bad English.

Answer 1

Demo: http://jsfiddle.net/abhitalks/Y64ny/

You need to wrap your text input in another div. Apply display:table to the container div and display:table-cell and width:100% to the wrapper div.

HTML:

<div style="width: 300px; background-color: orange">
    <div class="t"> <!-- This is the wrapper div around the text input -->
        <input type="text" />
    </div>
    <input type="button" value="Save" />
</div>

CSS:

div { display: table; }
div.t {
    display: table-cell;
    width: 100%;
}
div.t > input {
    width: 100%;
}

Update:

As the Op (@ChocapicSz) states in the comment below, adding box-sizing:border-box will fix the paddings.

Updated fiddle: http://jsfiddle.net/abhitalks/Y64ny/1/

Answer 2

http://jsfiddle.net/8FC2t/

    <div>
    <input type="text"  class='save'/>
    <input type="button" value="Save" />
</div>
<br>
<div>
    <input type="text" class='dns' />
    <input type="button" value="Do not Save" />
</div>



div{
    width:200px;
    background-color:orange;

}
.dns{
    width:calc(100% - 105px)
}
.save{
    width:calc(100% - 65px)
}
div>input[type='button']{
  float:right;
}