[SOLVED] children not staying inside parent divs

children not staying inside parent divs

Here is the fiddle for my problem, you'll observe that the children are not staying inside the parent div card and also I want the divs to take full width of parent which they are not taking.

Also, where should I be learning best practices? I am new to the community. Thanks in advance.

The left div(black_container) is short of content but should arrange the height according to the width of the right div(content_container) all the while staying inside the card div.

.card {
  box-shadow: 0 25px 45px rgba(0, 0, 0, 0.30), 0 15px 15px rgba(0, 0, 0, 0.22);
  max-width: 800px;
  margin: auto;
  position: relative;
}
.black_container {
  height: inherit;
  background: #333;
  display: inline-block;
  vertical-align: top;
  padding: 3%;
  font-family: 'Nunito', sans-serif;
}
.content_container {
  display: inline-block;
  padding: 3%;
  /* position: absolute;
    top:0;
    bottom: 0; */
}
.small_bar {
  padding: 3px;
  width: 30px;
  margin: 0 auto;
  background: #e4e4e4;
  margin-top: 35px;
}
.name {
  color: #fff;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 5px;
  margin: 30px auto 5px auto;
  text-align: center;
  font-weight: 800;
}
.designation {
  font-size: 10px;
  margin: 0 auto;
}
.qrcode_container {
  float: right;
}
.qr_container {
  overflow: auto;
  width: 100%;
}
.qr_text {
  display: inline-block;
  list-style-type: none;
}
.qr_text>li {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 2.5px;
  color: #9a9a9a;
}
.bars {
  display: inline-block;
  position: relative;
  top: 10px;
}
.bars .small_bar {
  width: 15px;
  background: #777;
}
.bar {
  position: absolute;
  top: -80px;
}
.qr_code {
  display: inline-block;
  height: inherit;
  border: 1px solid #e4e4e4;
  padding: 5px;
}
.button {
  width: 150px;
  letter-spacing: 1;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
  text-align: center;
  background: #333;
  padding: 5px 10px;
}

<div class="card">
  <div class="black_container">
    <div class="circular">
    </div>
    <p class="small_bar"></p>
    <p class="name">wow</p>
    <p class="name designation">Front-End Designer</p>
  </div>
  <div class="content_container">
    <!-- qr code container ends -->
    <div class="qr_container">
      <div class="qrcode_container">
        <ul class="qr_text">
          <li>LOREM</li>
          <li>IPSUM</li>
          <li>DPOLER</li>
        </ul>
        <div class="bars">
          <div class="small_bar bar"></div>
          <div class="small_bar"></div>
        </div>
        <div class="qr_code"></div>
      </div>
    </div>
    <!-- qr code container ends -->
    <div class="card_content">
      <p>Hello!</p>
      <p>My name is lorem</p>
      <p>I am a web designer</p>
      <p>Im stuck</span>
      </p>
      <div class="button">button</div>
    </div>
    <div class="card_footer"></div>
  </div>
</div>

Solution

A parent cannot take the height of a direct child if the child is absolute because the absolute elements are removed from the document flow(like floats), so in this case "card" doesn't even know "content_container" even exists .

https://jsfiddle.net/OmarIsComing/eq4L86g9/1/

update:

solution with flexbox: https://jsfiddle.net/OmarIsComing/eq4L86g9/2/

solution without flexbox: https://jsfiddle.net/OmarIsComing/eq4L86g9/3/