Positioning of div's using css: layout issue with absolute positioned div

Question

The code below shows a circle plus a bar, built using a previous post. The problem I'm experiencing is that the bar in practice has a fixed height equal to the circle's height. I guess this is because of the absolute inline-block. However, I seem to need absolute inline-block because without them text is placed below the bar instead of inside it.

The problem I'm experiencing is that if the text within the text div does not fit within bar (too much text), the text runs belows the bar (so the heigth of the bar is not expanding). Second problem is that if there's very little text within bar, the bottom-half overlaps with bar. How can I adjust my code for these problems?

.tophalf {
  width: 100%;
  background: #F1F3F2 none repeat scroll 0% 0%;
  padding: 5em;
}
.bar {
  background: #333;
  margin-left: 75px;
  min-height: 150px;
}
.circle {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 8px rgba(0, 0, 0, .8);
  margin-left: -75px;
  position: relative;
  vertical-align: middle;
  margin-right: 20px;
  overflow: hidden;
}
.text {
  margin-top: 1em;
  position: absolute;
  display: inline-block;
  vertical-align: top;
  color: #222;
}

<div class="tophalf">
  <div class="container">
    <div class="col-md-12">
      <div class="bar">
        <div class="circle"></div>
        <div class="text">My text</div>
      </div>
    </div>
  </div>
</div>

<div class="bottom-half"></div>

In the code snippet the text "My text" shows up below the bar, while it shows up inside bar in my app. I don't know the cause. Perhaps it is because of the container div from bootstrap, which the snippet doesn't perhaps process as such.

Answer 1

Browser is not able to adjust the height of the 'bar' because you are defining a location for the 'text' using 'absolute'. Can you please update the css style using the below one and see if it helps?

.circle {
  width: 150px;
  height: 150px;`
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 8px rgba(0, 0, 0, .8);
  margin-left: -75px;
  position: relative;
  float: left;
  vertical-align: middle;
  margin-right: 20px;
  overflow: hidden;
}
.text {
  margin-top: 1em;
  vertical-align: top;
  color: #222;
}

Answer 2

If you need an element to size its height based on its content, then you can either set it to be display: block or set height: auto.

Answer 3

If the text-div position is absolute, it will not affect the height of the wrapper.