[HTML][CSS]Wpływ div'a na swojego rodzica. Opcje

[Wicio]

Witam, bez zbędnych wstępów przejdę do sedna sprawy.

[HTML] pobierz, plaintext 
<div id="srodek">
        <span class="srodek_tekst">Ahio!</span>
        <div id="srodek2">
                <h2>AHIO</h2>
        </div>
</div>
 
<div id="srodek">
        <span class="srodek_tekst">Ahio!</span>
        <div id="srodek2">
                Ahio!
        </div>
</div>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
#srodek {
    text-align: right;
 
    margin: 10px auto;
    padding: 0px 2px 15px 2px;
 
    width: 1000px;
    background-color: rgb(82, 161, 226);
}
 
.srodek_tekst {
    padding-right: 15px;
 
    font-weight: bold;
    font-size: 50px;
 
    color: rgb(147, 196, 236);
}
 
#srodek2 {
    margin: 0px auto;
 
    text-align: left;
 
    background-color: rgb(255, 255, 255);
}
[CSS] pobierz, plaintext 

A, żeby zobrazować problem: http://wicio.webd.pl/c'mon/

Tekst wpisany w divie #srodek2, tak jakby oddziaływał na wysokość swojego rodzica czyli diva #srodek. Przekopałem kilka tematów, próbowałem dostosować porady do swojego problemu, ale klapa. Na przykładzie (2), gdy wielkość czcionki w divie #srodek2 jest defaultowa, jest ok. Problem zaczyna się przy zmianie jej wielkości.

O co chodzi? Jakaś wskazówka?

Pozdrawiam.