How to make input [type = text] to fill the remaining horizontal space?

Question

Any ideas how to do this? I created this script http://jsfiddle.net/matusko/2pctr9ok/3/ , and all I want to do is that the input behaves the same as the top divs.

CSS

.left {
    float:left;
    width:180px;
    background-color:#ff0000;
}
.right {
    width: 100%;
    background-color:#00FF00;
    display: block;
}

HTML:

<div>
    <div class="left">
        left
    </div>
    <div class="right">
        right
    </div>
</div>
<br/>
<div>
    <div class="left">
        left
    </div>
    <input type="text" placeholder="right" class="right"/>
</div>

I don’t understand why the input does not behave like a div, even if the decency inspector says that its display is a block.

Answer 1

You can use calc in CSS to dynamically calculate the width for you.

Example below:

.left {
  float: left;
  width: 180px;
  background-color: #ff0000;
}
.right {
  width: calc(100% - 180px);
  background-color: #00FF00;
  display: inline-block;
}
input[type="text"] {
  box-sizing: border-box;
  width: 100%;
}

<div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>
<br/>
<div>
  <div class="left">left</div>
  <div class="right">
    <input type="text" placeholder="right" />
  </div>
</div>

Run codeHide result

Answer 2

IE9 I would suggest the following http://jsfiddle.net/2pctr9ok/4/

position:absolute, overflow:hidden padding-left:180px .

Answer 3

It seems like width: 100% is causing the problem. Changing the width of the input will allow it to be on the same line as the left div.

input.right {
    width: 77%;
}

http://jsfiddle.net/vov70ymd/

Not perfect, but hopefully helps.