how to give a container div the height of the inner div

Problem

I have to dives container with class=d and it's background color red and inner with class=d2 with a background color gray

as shown the the following pictures,

div d div d2 and i want div d take the height of div d2 but i don't know how

this is the code

.d
{
    width:100%;
    height:100px;
    background-color:red;


}

.d2
{
    width:80%;
    height:auto;    
    float:left;
    background-color:Gray;

}

and if i put the height of div d "auto" the red color will "disappear"

Problem courtesy of: Fadi Khalil

Solution

you will need another div the style is clear:both like this then the height of d can set as auto

<style>
.d
{
    width:100%;
    height:auto;
    background-color:red;
}
.d2
{
    width:80%;
    height:auto;    
    float:left;
    background-color:Gray;
}
</style>
<div class="d">
    <div class="d2">
    type something here<br />
    <br />
    <br />
    <br />
    <br />
    something again the parent div's height will depend by this div
    </div>
    <div style="clear:both;">
</div>
Solution courtesy of: Jason Young

Discussion

If .d has a specified height (in your case, it does -- 100px) then you can set

.d2 {
    height: 100%;
}
Discussion courtesy of: Justin L.

since you have d's height set:

.d
{
  width:100%;
  height:100px;
  background-color:red;
}

set the height of d2 to either 100px or 100%:

.d2
{
  width:80%;
  height:100px;    
  float:left;
  background-color:Gray;
}
Discussion courtesy of: samrap

Your d2 height is larger than your d container the way I see it. I guess you don't want your container to have the same height as your d2 if d2 is smaller but if it is bigger your d container should still be large enough.

If this is the case change the height in your d to min-height: 100px;

Discussion courtesy of: user238801

This recipe can be found in it's original form on Stack Over Flow.