How to make div size depend on surrounding divs

Question

Hi does anyone know how to have a divs width depending on surrounding divs. Currently, my problem section looks this:

But i would like it to look like this I would like it to go there regardless of the screen size. Currently, it looks like this if i shrink my screen: So is there any way for it all to stay on the same line and just change the width of the progress bar so it always goes to the start of the next div.

#coinsdiv{
  border-width: 2%;
  border-style: black; 
  /*position: absolute;*/
float: right;
width: 70px;
      height: 70px;
      -webkit-border-radius: 25px;
      -moz-border-radius: 25px;
      border-radius: 75px;
      border-style: black;
      background: gold;
      margin-top: 2%;
      margin-right: 3%;
       display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    /*clear: left;*/
      /*display: inline-block;*/

}
#coinspan{
  font-family: Arial;
  font-size: 20pt;
  float: center;
  /*margin-top: auto;*/
}
#aroundcoin{
float: right;
margin-right: 3%;
margin-top: 2%;
width: 100%;

}
#progressbar {
  width: 70%;
  height: 5%;
  background: red;
  margin: 1%;
  float: left;
}
#inrect{
 width: 10%;
  height: 100%;
  background-color: blue; 
}
  #coinDescribe{
    float: right;
  }

<div id="aroundcoin">
    <div id="progressbar"><div id="inrect"></div></div>
<div id="coinDescribe">Coins Earned:</div>

<div id="coinsDiv" ><span id="coinspan">ERR</span></div>
</div>

Sorry This is a little vague. Thanks, Hamish.

Easy with CSS3 flexbox: [**Make div fill remaining horizontal space in flexbox**](http://stackoverflow.com/q/37745051/3597276) — Michael Benjamin, Apr 25 '17 at 02:55

score 0 · Accepted Answer · answered Apr 25 '17 at 02:32

Just another way you could layout. I made little edit to the html. But more edits in the css. so far you used flex for the container you could just continue with it.

#aroundcoin {
    /* float: right; */
    margin-right: 3%;
    margin-top: 2%;
    width: 100%;
    display: flex;
}
#progressbar {
    width: 70%;
    height: 5%;
    height: 50px;
    background: red;
    margin: 1%;
    /* float: left; */
    display: flex;
    flex-grow: 1;
}
#inrect {
    width: 10%;
    height: 100%;
    background-color: blue;
    /* flex-grow: 1; */
}
.coins-cont {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#coinspan {
    font-family: Arial;
    font-size: 20pt;
    float: center;
    /* margin-top: auto; */
}

<div id="aroundcoin">
    <div id="progressbar"><div id="inrect"></div></div>
    <div class="coins-cont">
<div id="coinDescribe">Coins Earned:</div>

<div id="coinsDiv" ><span id="coinspan">ERR</span></div>
</div>
</div>

score 0 · Answer 2 · answered Apr 25 '17 at 02:33

If possible, you can try changing your markup a little with something like that :

<div id="aroundcoin">
  <div id="progressbar" class="columns">
    <div id="inrect"></div>
  </div>

  <div id="coinsDiv">
    <div id="coinDescribe">Coins Earned:</div>
    <span id="coinspan">ERR</span>
  </div>
</div>

Remove the floats and use flexbox instead :

#coinsdiv{
  flex: 0 0 auto;
  max-width: 100%;
  border-width: 2%;
  border-style: black;
  width: 70px;
  height: 70px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 75px;
  border-style: black;
  background: gold;
  margin-top: 2%;
  margin-right: 3%;
  justify-content: center;
  align-items: center;
}
#coinspan{
  font-family: Arial;
  font-size: 20pt;
}
#aroundcoin{
  display: flex;
  flex-flow: row wrap;
  margin-right: 3%;
  margin-top: 2%;
  width: 100%;
}
#progressbar {
  flex: 1 1 0px;
  width: 70%;
  height: 5%;
  background: red;
  margin: 1%;
}
#inrect{
  width: 10%;
  height: 100%;
  background-color: blue;
}
#coinDescribe{
  // float: right;
}

How to make div size depend on surrounding divs

2 Answers2