The Codesee The Codesee - 6 months ago 6
HTML Question

Calculate width of div to make equal

I have a

form
and number of divs below it:

enter image description here

Is it possible to automatically calculate the width of the divs so that the last one in a row is running parallel with the submit button? Here's what I mean:

enter image description here

As you can see from the vertical red line, the div (aka the black rectangle) ends exactly where the submit button ends.

Here's a JsFiddle: https://jsfiddle.net/hphmmvuo/

HTML

<div class="container">
<form method="post" style="margin-left: 0.7%; margin-bottom: 10px;">
<input class="comment" type="text">
<input class="commentsubmit" type="submit">
</form>
<div class="box inventory">
</div>
<div class="box inventory">
</div>
<div class="box inventory">
</div>
<div class="box inventory">
</div>
<div class="box inventory">
</div>
</div>


CSS

.container {
margin-left: 5%;
margin-right: 5%;
}

.comment {
width: 80%;
box-sizing: border-box;
margin-right: 0.6%;
}

.commentsubmit {
box-sizing: border-box;
width: 14%;
}

.box {
width: calc(90% / 5);
display: inline-block;
padding-bottom: 10px;
margin: 0.7%;
border: 1px solid;
}

Answer

From my comment: https://jsfiddle.net/hphmmvuo/1/

the use of flex does makes it easier.

.container {
  margin-left: 5%;
  margin-right: 5%;
  display:flex;
  /* allow wrapping */
  flex-wrap:wrap;
  /* spray element from a border to another */
  justify-content:space-between;
}    .container:after {
  flex:1;/* extra element will fill up the end of the line*/ 
  content:'';
}
form {
  width:100%;
  display:flex;
}
.comment {
  flex:1;
  box-sizing: border-box;
  margin-right: 0.6%;
  margin-left:0.7vw;
}

.commentsubmit {
  box-sizing: border-box;
  width: 14%;
}

.box {
  width: calc(90% / 5);
  padding-bottom: 10px;
  margin: 0.7vw 0 0.7vw 1.4vw ;
  border: 1px solid;
}
<div class="container">
  <form method="post" style="margin-left: 0.7%; margin-bottom: 10px;">
    <input class="comment" type="text">
    <input class="commentsubmit" type="submit">
  </form>
  <div class="box inventory">
  </div>
  <div class="box inventory">
  </div>
  <div class="box inventory">
  </div>
  <div class="box inventory">
  </div>
  <div class="box inventory">
  </div>
  <div class="box inventory">
  </div>
  <div class="box inventory">
  </div>
  <div class="box inventory">
  </div>
  <div class="box inventory">
  </div>
</div>

Comments