make two divs overlap each other

Question

I want to make two divs overlap each other using css. I used the following code but when some text or content is added to the blue box it overflows the gray box while I want to keep it inside the the gray box and stretch it as the inner content is stretched.

.gray {
  position: relative;
  background-color: #818181;  
}

.white {
  background-color: #fff;
}  

.blue {
  position: absolute;
  background-color: #0090ff;
  top: 0;
  right: 10px;
  left: 100px;
}  

<div class="gray">
  <div class="white">
    left text
  </div>  
  <div class="blue">
    <p>some text goes here</p>
    <p>some text goes here</p>
    <p>some text goes here</p>
  </div>    
</div>
  

here is my satisfactory result:

How can I correct the css to get the above result?

Answer 1

Change your CSS to this. The gray will autosize in height when you add more content to the blue div.You may need to change some with and margin values to get the layout you want, but the mechanism is there.

.gray {
    background-color: #818181;
    z-index: -1;
    height: auto;
    width: 300px;
    position: absolute;
    overflow: hidden;
}
.white {
    background-color: #fff;
    z-index: 0;
    height: 150px;
    width: 280px;
    position: absolute;
    margin-left: 10px;
    margin-top: 10px;
}
.blue {
    background-color: #0090ff;
    top: 0;
    height: auto;
    width: 180px;
    z-index: 1;
    position: relative;
    float:left;
    margin-left: 60px;
    margin-top: 10px;
}

See it work: http://jsfiddle.net/djwave28/dj9wo8ak/4/