Stretch fixed to bottom parent div on div.

Question

So, I have a main container that looks like this:

I want to be able to adapt the parent div to the number of the child it receives. Let them say that we remove div2. The result should be something like this:

Instead, the parent div does not stretch to the width of the child div

Here is my code:

HTML:

  <div class="main-container">
    <!-- Card container -->
    <div class="card-container">
      <div class="card">div1</div>
      <div class="card">div2</div>
      <div class="card">div3</div>
    </div>
    <!-- Footer container -->
    <div class="footer">i am a footer</div>
  </div>

CSS

.main-container {
  position: fixed;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 0 15px #B3B3B3;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  text-align:center;
}
.card-container {
  color: #3B3D3D;
  height:105px;
  float: left;
  width: 100%;
}
.footer {
  color: #FFFFFF;
  background: #0095D3;
  height: 45px;
  float: left;
  width: 100%;
}
.card {
  width:100px;
  float:left;
}

What am I doing wrong here? I tried display: inline-block solutions ; , but since the parent div must be fixed at the bottom, I do not see the desired result.

Any help would be precious.

Thanks in advance.

Answer 1

: http://codepen.io/n3ptun3/pen/PPgWNb

display: inline-block.

HTML CSS: .card-container .footer float: left; width: 100%;. , 100% , - .

.main-container margin: 0 auto; position: fixed;. position: fixed; . left: 0; right: 0; , . width: 100%; max-width: 400px; , .

left: 50%; ( 50% , ), transform: translate(-50%);, 50% . , / .

, "", " ", .

.main-container {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
  box-shadow: 0 0 15px #B3B3B3;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  text-align: center;
}

.card-container {
  color: #3B3D3D;
  height: 105px;
}

.card {
  width: 100px;
  float: left;
}

.footer {
  color: #FFFFFF;
  background: #0095D3;
  height: 45px;
}

: (re: "" ), , .main-container. 50%, 50% , div, . , float: left; .card display: flex; .card-container. "", .

: http://codepen.io/n3ptun3/pen/PPgWNb

.main-container {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
  box-shadow: 0 0 15px #B3B3B3;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  text-align: center;
}

.card-container {
  color: #3B3D3D;
  height: 105px;
  display: flex;
}

.card {
  width: 100px;
  //  float: left;
}

.footer {
  color: #FFFFFF;
  background: #0095D3;
  height: 45px;

}

Answer 2

https://jsfiddle.net/2Lzo9vfc/136/

.card , https://jsfiddle.net/2Lzo9vfc/138/

CSS

.main-container {
  position: fixed;
  margin: 0 auto;
  left: 50%;
  bottom: 0;
  box-shadow: 0 0 15px #B3B3B3;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  text-align:center;
  display: inline-block;
  transform: translateX(-50%);
}

.footer {
  color: #FFFFFF;
  background: #0095D3;
  height: 45px;
  width: 100%;
}
.card {
  width:100px;
  height:105px;
  display: inline-block;
}

HTML

<div class="main-container">
    <div class="card">div1</div>
    <div class="card">div2</div>
    <div class="card">div3</div>
    <div class="footer">i am a footer</div>
</div>