Text input and button input in the same line
css, html
Solution
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/
Problem
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.