Benjamin Lawson Benjamin Lawson - 4 months ago 9
HTML Question

CSS: How to make an input box stretch to the width of its given absolute position left and right value?

I am making a small input bar. The bar has 2 input, each positioned with absolute positioning and set to percentage for responsive display.



.input_one {
position: absolute;
left: 5px;
right: 61%;
}

.input_two {
position: absolute;
right: 32px;
left: 40%;
}

<input type="text" class="input_one">
<input type="text" class="input_two">





I want the inputs to stretch between their 2 left and right values, but the problem now is that they stay solid width and only take one of the 2 set positions... the input box doesn't stretch like I want it to. Any ideas?

Thanks!

Answer

Try this. Check support calc() for u browser http://caniuse.com/#search=calc

.input_one {
  position: absolute;
  left: 5px;
  right: 61%;
  width: calc(100% - 5px - 61%);
  box-sizing: border-box;
}
.input_two {
  position: absolute;
  right: 32px;
  left: 40%;
  width: calc(100% - 32px - 40%);
  box-sizing: border-box;
}
Comments