CODEWITHSUNDEEP
htmlcss
Boky
Boky

Reputation: 12074

Middle div take up remaining width

I have next html structure : 

<div class="offerButtons">
  <button type="reset" class="btnReset"><span> No </span></button>
  <input type="text" class="offerInput" />
  <button type="submit" class="btnSubmit"><span> Yes </span></button>
</div>

And my css is as follows : 

.offerButtons {
    display: table;
    width: 100%;
    background-color: yellow;
}

.btnReset, .btnSubmit {
  border: 1px solid red;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: table-cell;
  text-align: center;
  vertical-align: middle; 
}

.btnReset span, .btnSubmit span{
   color: red;
}

.offerInput {
  height: 31px;
  margin: 0 5px;
  display: table-cell;
}

btnReset and btnSubmit have a fixed width. What I want is that those two buttons have fixed width and that the inout field takes the rest of the width.

I want to get something like :

enter image description here

But now, with this code, I get :

enter image description here

Any idea?

Here is jsfiddle

Upvotes: 3

Views: 385

Answers (4)

frnt
frnt

Reputation: 8795

You could make use of css calc()function, as below to minus the width of yes and no button from .offerInput.

.offerButtons {
    display: table;
    width: 100%;
    background-color: yellow;
}

.btnReset, .btnSubmit {
  border: 1px solid red;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: table-cell;
  text-align: center;
  vertical-align: middle; 
}

.btnReset span, .btnSubmit span{
   color: red;
}

.offerInput {
  height: 31px;
  text-indent: 15;
  margin: 0 5px;
  display: table-cell;
  width:calc(98% - 70px);
 }

    
<div class="offerButtons">
  <button type="reset" class="btnReset"><span> No </span></button>
  <input type="text" class="offerInput" />
  <button type="submit" class="btnSubmit"><span> Yes </span></button>
</div>

Upvotes: 1

Kristoffer Lund
Kristoffer Lund

Reputation: 209

I would also recommend flexbox as a good option here. Just put flex on the parent div and set width of offerInput to 100% and you are good to go. Correct me if I'm wrong, but I don't think flex grow will be necessary.

Upvotes: 0

Adil
Adil

Reputation: 22421

Here's a one line solution by setting custom width of input field by calculating the widths of buttons:

.offerInput {
    height: 31px;
    margin: 0 5px;
    display: table-cell;
    width: calc(500px - 75px);
}

There're many other possible ways of doing this including adopting any front end framework like Bootstrap or Zurb Foundation especially if you're designing a complete web view.

Upvotes: -1

Mohammad Usman
Mohammad Usman

Reputation: 39342

You can use css3 flexbox as well. Following css will make it like you want:

.offerButtons {
  align-items: center;
  display: flex;
  width: 500px;
}
.offerInput {
  flex-grow: 1;
}


.offerButtons {
  align-items: center;
  display: flex;
  width: 500px;
  background-color: yellow;
}

.btnReset, .btnSubmit {
  border: 1px solid red;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  text-align: center;
}

.btnReset span, .btnSubmit span{
  color: red;
}

.offerInput {
  height: 31px;
  text-indent: 15;
  margin: 0 5px;
  flex-grow: 1;
}
<div class="offerButtons">
  <button type="reset" class="btnReset"><span> No </span></button>
  <input type="text" class="offerInput" />
  <button type="submit" class="btnSubmit"><span> Yes </span></button>
</div>

However if you are not comfortable with flexbox here is another method that will work in almost most of the browsers.

.offerButtons {
  background-color: yellow;
  position: relative;
  padding: 0 40px;
}

.btnReset, .btnSubmit {
  transform: translateY(-50%);
  position: absolute;
  border: 1px solid red;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  left: 3px;
  top: 50%;
}
.btnSubmit {
  left: auto;
  right: 3px;
}

.btnReset span, .btnSubmit span{
  color: red;
}

.offerInput {
  height: 31px;
  display: block;
  width: 100%;
}
<div class="offerButtons">
  <button type="reset" class="btnReset"><span> No </span></button>
  <input type="text" class="offerInput" />
  <button type="submit" class="btnSubmit"><span> Yes </span></button>
</div>

Upvotes: 6

Related Questions