Vou explicar os primeiros problemas, primeiro vertical-align
é usado para elemento irmãos e que sejam inline
ou inline-*
(tipo texto), div por padrão são block
o que é diferente do "tipo texto".
Ou seja você aplicou vertical-align esperando afetar objetos block e que são pai e filho e não irmãos, uma maneira de usar o vertical-align seria esta (isto não é solução é apenas pra explicar o 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>
Outra coisa que parece que talvez esteja confundindo é o termo background, o background só afeta o elemento em si, cada elemento vai ter o seu proprio background e a propriedade background nunca vai vazar o elemento.
Uma coisa, você não precisa "fixar" a altura de todos elementos, você poderia usar padding por exemplo:
.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>
A soma do height: 240px
com o padding-top: 20px
e padding-bottom: 20px
vai fazer o elemento pai ter 280px
Um exemplo com duas divs:
.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>