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>

enter image description here

Sorry for my bad English.

This answer might help: http://stackoverflow.com/questions/18961918/css-fill-remaining-width. almost the exact same question is asked. — Joel Harkes, May 14 '14 at 13:11

score 4 · Accepted Answer · edited May 25 '21 at 09:15

4

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/

edited May 25 '21 at 09:15

biberman

5,606
4
11
35

answered May 14 '14 at 13:28

Abhitalks

27,721
5
58
81

1

This is a nice solution. My problem with this was that after i resolved this problem, i had to add a padding to the text input and it went under the button input. A very nice solution for this is the box-sizing. :) – Szabolcs Antal May 15 '14 at 08:06
@ChocapicSz: you are absolutely right. i added that as an update to the answer. thanks. – Abhitalks May 15 '14 at 08:24

user115014 · Answer 2 · 2014-05-14T13:31:06.203

Using position absolute and slightly restructuring the css might work better for you.

Also using <button> instead of <input type="button"> makes life a little easier to style.

I've created an example at codepen for you to see.

HTML:

<div class="container" style="width: 300px">
  <input type="text" class="text_input" />
  <button value="Save" class="btn">CLICK</button>
</div>

<div class="container" style="width: 500px">
  <input type="text" class="text_input" />
  <button value="Save" class="btn">CLICK</button>
</div>

<div class="container" style="width: 200px">
  <input type="text" class="text_input" />
  <button value="Save" class="btn">CLICK</button>
</div>

CSS:

.container {
  position: relative;
  border: 3px solid orange;
  height: 50px;
  overflow: hidden;
  margin-bottom: 10px;
}

.text_input {
  height: 44px;
  width: 60%;
  padding: 0;
  line-height: 30px;
  font-size: 20px;
  padding: 0;
  margin: 3px;
  margin-left: 20px;
  border: none;
}
.text_input:focus {
  outline: none;
}

.btn {
  position: absolute; 
  height: 50px;
  line-height: 50px;
  right: 0;
  top: 0;
  margin: 0;
  padding: 0;
  background: orange;
  color: white;
  border: none;
  width: 30%;
  font-weight: bold;
}

.btn:hover {
  color: black;
  cursor: pointer;
}

Gives you this:

enter image description here

See it working on codepen

I wanted so that the click button to have the same width all the time if the text is the same, but thanks anyway! — Szabolcs Antal, May 15 '14 at 08:01
You could set the width in pixels and still have the input as percentage - this would mean that there might be a gap sometimes on the right between the end of the input and the button, but because I've taken the 'outline' out with css that shouldn't be too apparent. You could also set the input width with JS to work out the width. — user115014, May 15 '14 at 08:20

Karthikeyan · Answer 3 · 2014-05-14T13:31:59.947

<style>

.f-lft {
    float:left;
    border:2px solid orange;
 }

</style>

<body>
<div style="width: 300px;">
  <div> 
    <input class="f-lft"type="text" style="width:80%"/>
    <input class="f-lft" type="button" value="Save"/> 
 </div>
</div>
</body>

I have attached a fiddle for you http://jsfiddle.net/GLAee/

I have done a single one. Remaining you better practice.

Edited : add width of text field in percent

score 1 · Answer 4 · answered May 14 '14 at 13:29

1

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

answered May 14 '14 at 13:29

Vikram Jakkampudi

502
1
3
16

1

I did not want to set the width of the buttons, i wanted so that the width of the buttons to be calculated automatically depending on the text inside. – Szabolcs Antal May 15 '14 at 08:04

score 0 · Answer 5 · answered Aug 27 '22 at 14:59

Another way is to use display flex on their parent.

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

CSS

.parent{
  display: flex;
  width: 100%;
  height: 50px;
}

input[type="text"] {
  height: 50px;
  width: 90%;
  border: none;
  outline: none;
  padding: 10px;
  font-size: 14px;
}

input[type="button"] {
  width: 10%;
  height: 50px;
  border: none;
  outline: none;
  background-color: orange;
}

Note, you can play around with the font-size and height to have the desired height and font-size that you want.

Text input and button input in the same line

5 Answers5