Make input field element fluid and take up remaining available space with two fixed sized elements on one row

Question

How can i make the input field be fluid and take up the remaining space in the middle?

I have two fixed sized elements, one on the left and one on the right.

I want the remaining space to be taken up by the input field, and be responsive/fluid, so the input field will have a variable width.

Thanks.

jsfiddle: http://jsfiddle.net/FXeyr/1/

HTML code:

<div class="wrapper">
<div class="yellow">
    left
</div>
<div class="blue">
    right
</div>
<input class="green">
</input>
</div>

CSS:

.yellow
{
 width: 50px;
 float: left;
 background-color: yellow;
}

.blue
{
  width: 50px;
  float: right;
  background-color: blue;
}

.green
{
}

p.s. i'm trying to do this with pure css.

Answer 1

You can try something like this:

.yellow {
    position: absolute;
    left: 0;
    width: 50px;
    background-color: yellow;
}
.blue {
    position: absolute;
    right: 0;
    width: 50px;
    background-color: blue;
}
.green {
    width: 100%;
}
.wrapper {
    outline: 1px dotted red;
    position: relative;
    padding: 0 50px;
}

Fiddle: http://jsfiddle.net/audetwebdesign/ADdDE/

You need a .wrapper containing block where you set left and right padding to accommodate the two positioned (yellow/blue) elements.

The input element (green) has a width of 100%, so it fills up the space except for the padding on left and right.

You then use absolute positioning to place the two other elements. Since you specified their widths, you know how much padding to use.

Note
The input element has a border whose width can vary among browsers, therefore, you may see a slight variation among browsers. If you take a screen shot and count pixels, you may see that the centering is not perfect, but for the simplicity of coding, it works quite well.