How to make a variable width input field

Question

I am trying to create a shortcut and an input field on the same line as a variable width input field that will expand based on the available space

http://jsfiddle.net/chovy/WcQ6J/

<div class="clearfix"> <aside>foo</aside> <span><input type="text" value="Enter text" /></span> </div> .clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { display: table; content: ""; } .clearfix:after { clear: both; } div { border: 1px solid red; } aside { display: block; width: 100px; background: #eee; float: left; } span { display: block; width: 100%; background: #ccc; } input { width: 100%; box-sizing: border-box; border: 1px solid #000; } 

It works fine with a range, but when I add input, it wraps to the next line.

Answer 1

Here is some monstrous solution. I honestly don't understand why this works. I had this in old codefen. Good luck

http://jsfiddle.net/sheriffderek/DD73r/

HTML

 <div class="container"> <div class="label-w"> <label for="your-input">your label</label> </div> <div class="input-w"> <input name="your-input" placeholder="your stuff" /> </div> </div> <!-- .container --> 

CSS

 *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .container { width: 100%; float: left; height: 2em; } .label-w { width: 8em; height: 100%; float: left; border: 1px solid red; line-height: 2em; } .input-w { float: none; /* key */ width: auto; /* key */ height: 100%; overflow: hidden; /* key */ border: 1px solid orange; } .input-w input { width: 100%; height: 100%; } 

Answer 2

You can use display: table-* :

 div { display: table; width: 100%; background-color: #ccc; } aside { display: table-cell; width: 100px; background: #eee; } span { display: table-cell; background: #bbb; } input { display: block; width: 100%; background-color: #ddd; } 

http://jsfiddle.net/userdude/WcQ6J/5/

It is slightly more compatible (and flexible) that display: inline-block , which is not supported in IE8.

Answer 3

You can use the CSS calc property to determine the width minus the borders and the width aside:

 input { width: calc(100% - 102px); /* 100% minus (aside width (100px) + border width (2px)) */ box-sizing: border-box; border: 1px solid #000; } 

Fiddle

Answer 4

You can set the width "to the side" on the pixels and the range up to a percentage, but as you saw, this will cause problems. It’s easier to set both percentages. In addition, the “inline block” will put your elements in line. You can use this or "float: right;", but I prefer to customize the display.

 aside { display: inline-block; width: 9%; } span { display: inline-block; width: 90%; } 

See jsfiddle .