make two divs overlap each other - html

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/

Answer 2

So you need to define blue box as position relative the overflow will be stopped and and when you add some content to blue div it will not overflow.
If you want to get white div under a blue div you need to set it to position:absolute and set it z-indx lesser than blue div has

Answer 3

try this
.gray {
position: relative;
background-color: #818181;
height: 200px;
width: 100%;
}
.white {
background-color: #fff;
float: left;
width: 97%;
position: relative;
z-index: 2;
height: 50%;
left: 1%
}
.blue {
position: relative;
background-color: #0090ff;
z-index:3;
width:40%;
height:100%;
top: -9%;
left: 8%;
}
Play with the height and width sizes to reach your desired dimensions.
Do the same with the position values to place the divs the way you want
see this fiddle http://jsfiddle.net/u50jj2e1/1/

Answer 4

.gray {
background-color: #818181;
z-index: -1;
height: 300px;
width: 300px;
position: absolute;
overflow: hidden;
/* Instead of hidden it could be "overflow: auto;"*/
}
.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: 290px;
width: 180px;
z-index: 1;
position: absolute;
margin-left: 20px;
margin-top: 10px;
}
<div class="gray">
<div class="white">
</div>
<div class="blue">
</div>
</div>
I create exact shape for you: http://jsfiddle.net/dj9wo8ak/1/