Stretch fixed to bottom parent div to div child's width

Question

So, I have a main container that shows like the following:

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

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

Here's 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've tried the display: inline-block; solutions out there but since the parent div must be fixed to the bottom, I am not seeing the desired result.

Any help will be precious.

Thanks in advance.

Answer 1

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

You can try to remove one .card on click and see what hapens here 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>

Answer 2

Here you go: http://codepen.io/n3ptun3/pen/PPgWNb

You don't need to use display: inline-block .

I've left your HTML alone, and simplified some of your CSS: .card-container and .footer don't need float: left; and width: 100%; . They are both block-level elements so they will take up 100% of the width, and they don't need anything to wrap around them.

On the .main-container , you can't set margin: 0 auto; and position: fixed; . position: fixed; removes the ability for centering via margin. left: 0; and right: 0; were stretching the size of the main container, so those need to be removed. width: 100%; and max-width: 400px; were trying to fix the width issue, but that wouldn't allow resizing based on content.

Instead you need to set left: 50%; (places left edge of element at 50% of the parent's width, ie the viewport width, in this case) and then transform: translate(-50%); to bring the element back toward the left by 50% of its width. Thus bringing the element to the center of the window/viewport.

Now, if you remove one of the "cards," it will resize the "main-container," while keeping everything fixed to the bottom and centered.

.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;
}

EDIT: Based on your new information (re: the increased width or added "cards"), I've found that the issue lies with the left position on the .main-container . When you position the element by 50% and its width is more than 50% of the parent, it runs into the right side of the parent div, and you get the stacking. To fix this, you can instead remove the float: left; on .card and add display: flex; on .card-container . This will allow you to increase the width of the "cards" while keeping them from stacking.

I've updated the code here: 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;

}