Boky Boky - 10 days ago 5
CSS Question

Absolute positioned div won't take the rest of the width

I have the html like this :

<div class="addToCardButton">
<div class="offerButtons">
<button type="reset" class="btnReset">R</button>
<input type="number" inputmode="numeric" placeholder="Your offer..." class="offerInput">
<button type="submit" class="btnSubmit">S</button>
</div>
</div>


And the css is as follows :

.addToCardButton{
width: 370px;
background-color: yellow;
position: relative;
height: 30px
}

.offerButtons{
width: 100%;
position:relative;
}

.btnReset, .btnSubmit, .offerInput{
position: absolute;
}

.btnReset{
width: 30px;
height: 30px;
left: 0;
}

.btnSubmit{
width: 30px;
height: 30px;
right: 0;
}

.offerInput{
position:absolute;
left: 35px;
right: 35px;
height: 24px;
}


Thus, what I want is that buttons have fixed width (30px) and that input takes the rest of the width.

I tried to do it with position absolute, but I get something like this :

enter image description here

But I want something like this :

enter image description here

Thus in my case the input doesn't take the rest of the width. What am I doing wrong?

I tried also with

width: calc(100% - 70px);


And that worked in all good browsers, but in Edge and IE not.

Here is fiddle.

Answer

If you really care about IE and other old browsers:

.addToCardButton {
    width: 370px;
    background-color: yellow;
    position: relative;
    height: 30px
}

.offerButtons {
    width: 100%;
    position: relative;
}

.input-wrapper {
    width: 100%;
    padding-left: 31px;
    padding-right: 35px;
    box-sizing: border-box;
}

.btnReset {
    position: absolute;
    width: 30px;
    height: 30px;
    left: 0;
    top: 0;
}

.btnSubmit {
    width: 30px;
    height: 30px;
    right: 0;
    top: 0;
    position: absolute;
}

.offerInput {
    height: 24px;
    width: 100%;
}
<div class="addToCardButton">
  <div class="offerButtons">
    <button type="reset" class="btnReset">R</button> 
    <div class="input-wrapper">
      <input type="number" inputmode="numeric" placeholder="Your offer..." class="offerInput">
    </div>
    <button type="submit" class="btnSubmit">S</button>
  </div>
</div>

Comments