Positioning Of Div's Using Css: Layout Issue With Absolute Positioned Div

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 g

Solution 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: 008pxrgba(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;
}

Solution 2:

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

Solution 3:

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.