Плавающий блок замирающий перед футером
 

Здравствуйте.
Есть такой html:

<div class="div2" style="height: 40%; position: fixed;">Hello</div><div class="div1" style="height: 50%; position: fixed;">World</div><br><footer style="height: 20%;">Я футер!</footer>

P.S. Оба div фиксированные, надо чтобы первый div останавливался за 10px до футера, а другой за 20px до второго div
Прошу помощи так как в js не силен:( :( :(
Как - то так:

Интересно, чем это продиктовано? :blink:
90% уже занято двумя фиксированными блоками... Есть еще якобы "футер" 20%...
Итого 110% экрана занято. И нужно еще между этим сделать отступов на 30px в сумме. :D