230

Let's say I have an html snippet like this:

<div style="width:300px;">
    <label for="MyInput">label text</label>
    <input type="text" id="MyInput" />
</div>

This isn't my exact code, but the important thing is there's a label and a text input on the same line in a fixed-width container. How can I style the input to fill the remaining width of the container without wrapping and without knowing the size of the label?

1
  • I know the question was long time ago but I will add good solution which of course isn't outdated.
    – danijar
    Aug 5, 2012 at 11:10

9 Answers 9

170

Here is a simple and clean solution without using JavaScript or table layout hacks. It is similar to this answer: Input text auto width filling 100% with other elements floating

It is important to wrap the input field with a span which is display:block. Next thing is that the button has to come first and the the input field second.

Then you can float the button to the right and the input field fills the remaining space.

form {
    width: 500px;
    overflow: hidden;
    background-color: yellow;
}
input {
    width: 100%;
}
span {
    display: block;
    overflow: hidden;
    padding-right:10px;
}
button {
    float: right;
}
<form method="post">
     <button>Search</button>
     <span><input type="text" title="Search" /></span>
</form>

A simple fiddle: http://jsfiddle.net/v7YTT/90/

Update 1: If your website is targeted towards modern browsers only, I suggest using flexible boxes. Here you can see the current support.

Update 2: This even works with multiple buttons or other elements that share the full with with the input field. Here is an example.

15
  • This changes the html, though: the item you want at the end is listed first in the html. May 26, 2013 at 17:00
  • @JoelCoehoorn, that's right. It is your decision whether you prefer that over using a table or not.
    – danijar
    May 26, 2013 at 17:31
  • 2
    This works great. Use float:left instead of right to create a facebook style tagger or something similar. Feb 24, 2014 at 17:22
  • 1
    This works great! But can someone explain the logic behind how this works?!
    – sherlock
    Jul 8, 2014 at 4:44
  • 1
    This is a bad answer. It looks like it works if you just glance at it, but go try the fiddle. It is actually chopping of half the input box, but you can't tell unless you start testing it out. The goal is to fit the input box to the width of the display area, not truncate it. If you try to do any styling (rounded corners, a border, right justification of text) this utterly fails.
    – Roger Hill
    Jun 30, 2017 at 5:03
154

as much as everyone hates tables for layout, they do help with stuff like this, either using explicit table tags or using display:table-cell

<div style="width:300px; display:table">
    <label for="MyInput" style="display:table-cell; width:1px">label&nbsp;text</label>
    <input type="text" id="MyInput" style="display:table-cell; width:100%" />
</div>
9
  • Would this work with IE6? Otherwise I may have to actually define a little table for this :( Apr 21, 2009 at 16:49
  • not sure, I would say do a quick test to see what they do, but I don't have easy access to IE
    – cobbal
    Apr 21, 2009 at 16:53
  • That's okay: this pointed me towards something that does work. Apr 21, 2009 at 17:06
  • 10
    Agreed, you should share your actual solution with the rest of us, and mark that as the answer instead -- as is, this is kind of annoying. Jun 15, 2012 at 2:04
  • Why do you want to use this solution as there is another one without table-cell. Look at my answer.
    – danijar
    Sep 3, 2012 at 18:19
67

I suggest using Flexbox:

Be sure to add the proper vendor prefixes though!

form {
  width: 400px;
  border: 1px solid black;
  display: flex;
}

input {
  flex: 2;
}

input, label {
  margin: 5px;
}
<form method="post">
  <label for="myInput">Sample label</label>
  <input type="text" id="myInput" placeholder="Sample Input"/>
</form>

5
  • The question is very old... this is probably how I'd do it today. If I get a chance to try it, and it works with all the browsers I needed, I'll update the accepted answer. Probably, though, it will be a long time before I get to try this. I'm on the sys admin team now, don't do as much web stuff any more. Jul 9, 2014 at 13:28
  • Could you provide an example using a label? I would be especially interested in how the HTML from the original question could be layouted using border-box...
    – lacco
    Dec 10, 2014 at 9:18
  • 7
    Why flex: 2 and not flex: 1? Oct 4, 2018 at 21:04
  • @IuliusCurt According to the docs, wouldn't make a difference in this case. "Flex: This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional." css-tricks.com/snippets/css/a-guide-to-flexbox
    – Bersan
    May 1, 2021 at 21:43
  • 1
    Well, then, flex: 42 it is Jul 23, 2021 at 13:20
60

Please use flexbox for this. You have a container that is going to flex its children into a row. The first child takes its space as needed. The second one flexes to take all the remaining space:

<div style="display:flex;flex-direction:row">
    <label for="MyInput">label&nbsp;text</label>
    <input type="text" id="MyInput" style="flex:1" />
</div>

3
  • 1
    Hi five! :) One thing worth adding (in the context of many of us still newly embracing the flexbox model): that INPUT will be in a FORM, which in turn may end up in the overall flex container (e.g. with other, non-form stuff), and then it will no longer work -- because the flex behavior only applies to direct descendants (i.e. child elements). So, the FORM must be a flex contrainer, too!
    – Sz.
    Mar 17, 2018 at 13:36
  • flex-direction is already row by default, you dont have to specify it.
    – fabpico
    Jun 8, 2018 at 13:24
  • flex for the win (again); very relevant answer in 2019
    – secretwep
    Mar 27, 2019 at 19:44
18

Easiest way to achieve this would be :

CSS :

label{ float: left; }

span
{
    display: block;
    overflow: hidden;
    padding-right: 5px;
    padding-left: 10px;
}

span > input{ width: 100%; }

HTML :

<fieldset>
    <label>label</label><span><input type="text" /></span>
    <label>longer label</label><span><input type="text" /></span>
</fieldset>

Looks like : http://jsfiddle.net/JwfRX/

2
  • This works well for me. The overflow keeps things from wrapping, the padding-right keeps the right side from being chopped off. Jun 19, 2013 at 21:12
  • 1
    PS: With modern browser I'd recommend using flex-box as described above by leishman…
    – llange
    May 27, 2018 at 14:04
5

Very easy trick is using a CSS calc formula. All modern browsers, IE9, wide range of mobile browsers should support this.

<div style='white-space:nowrap'>
  <span style='display:inline-block;width:80px;font-weight:bold'>
    <label for='field1'>Field1</label>
  </span>
  <input id='field1' name='field1' type='text' value='Some text' size='30' style='width:calc(100% - 80px)' />
</div>
1
  • 4
    This assumes you know the exact width of the label or are willing to put up with extra space. Jun 22, 2015 at 20:04
3

you can try this :

div#panel {
    border:solid;
    width:500px;
    height:300px;
}
div#content {
	height:90%;
	background-color:#1ea8d1; /*light blue*/
}
div#panel input {
	width:100%;
	height:10%;
	/*make input doesnt overflow inside div*/
	-webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
	/*make input doesnt overflow inside div*/
}
<div id="panel">
  <div id="content"></div>
  <input type="text" placeholder="write here..."/>
</div>

1
  • best method today
    – yota
    Nov 19, 2017 at 17:55
3

The answers given here are a bit outdated. So, here I'm with the easiest solution using modern flexbox.

.input-container{
display:flex;
}
input{
flex-grow: 1;
margin-left: 5px;
}
<div style="width:300px;">
    <div class="input-container">
    <label for="MyInput">label text: </label>
    <input type="text" id="MyInput"/>
    </div>
    
    <div class="input-container">
    <label for="MyInput2">Long label text: </label>
    <input type="text" id="MyInput2" />
    </div>
    
</div>

0

If you're using Bootstrap 4:

<form class="d-flex">
  <label for="myInput" class="align-items-center">Sample label</label>
  <input type="text" id="myInput" placeholder="Sample Input" class="flex-grow-1"/>
</form>

Better yet, use what's built into Bootstrap:

  <form>
    <div class="input-group">
      <div class="input-group-prepend">
        <label for="myInput" class="input-group-text">Default</label>
      </div>
      <input type="text" class="form-control" id="myInput">
    </div>
  </form>

https://jsfiddle.net/nap1ykbr/

1
  • Indeed, no need to touch the CSS anymore
    – wi2ard
    Sep 27, 2021 at 9:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.