Background-color does not track content

Question

Well, I have the code below and I have a question:

Code

.um {
  background-color:#000;
  width:600px;
  height:280px;
  margin:0 auto; /*centralizando horizontalmente esta div*/
}

.dois {		
  background-color:#CCC;
  width:300px;
  height:240px;	
  margin:0 auto; /*centralizando horizontalmente esta div*/
  line-height:240px;
  vertical-align:middle;
}

<div class="um">

  <div class="dois">

    <div style="border:red 1px solid;">Teste 1!</div>
    <div style="border:red 1px solid;">Teste 2!</div>

  </div>

</div>

As div's daughters of div.dois are having the same height as line-height of div.dois and I can’t center vertically div.dois in the center of div.um.

Answer 1

I’ll explain the first problems, first vertical-align is used for siblings element and which are inline or inline-* (text type), div by default are block which is different from "text type".

In other words, you applied vertical-align expecting to affect block objects and that are father and son and not siblings, one way to use vertical-align would be this (this is not the solution is just to explain the vertical-align):

.irmao-1 {
    background: #fc0;
    height: 160px;
}

.irmao-2 {
    background: #ccc;
    height: 240px;
}

.irmao-1, .irmao-2 {
    display: inline-block;
    vertical-align: middle;
}

<div class="irmao-1">
  Irmão 1
</div>
<div class="irmao-2">
  Irmão 2
</div>

Another thing that seems to be confusing is the term background, the background only affects the element itself, each element will have its own background and the background property will never leak the element.

One thing, you don’t need to "fix" the height of all elements, you could use padding for example:

.pai {
   background-color: #000;
   padding-top: 20px;
   padding-bottom: 20px;
}

.filho {
   background-color: #ccc;
   width:300px;
   height: 240px;
}

<div class="pai">
    <div class="filho">
       oi
    </div>
</div>

The sum of height: 240px with the padding-top: 20px and padding-bottom: 20px will make the parent element have 280px

An example with two Ivs:

.pai {
   background-color: #000;
   padding-top: 20px;
   padding-bottom: 20px;
}

.filho-1 {
   margin: 0 auto; /*centraliza horizontal*/
   background-color: #ccc;
   width:300px;
   height: 240px;
}

.filho-2 {
   margin: 0 auto; /*centraliza horizontal*/
   background-color: #fc0;
   width:300px;
   height: 240px;
}

<div class="pai">
    <div class="filho-1">
       oi
    </div>
    <div class="filho-2">
       oi
    </div>
</div>

Answer 2

Your "background" of div father does not accompany the div's daughters by the fact that you have a fixed height on her, in case the height:240px; take it and accompany.

And to align horizontally the child elements just put in them a margin: 0 auto;!

#pai {
  background-color:#000;
  width:600px;
  line-height:280px;
  text-align:center;      
}

.filho {
  margin: 0 auto;
  background-color:#CCC;
  width:300px;
  height:240px;   
}

<div id="pai">

  <div class="filho">

    teste 2!

  </div>

  <div class="filho">

    teste 3!

  </div>

</div>

Now if you really have to fixar a height in the parent element background accompany the children.