DenJel

Вы что, гоните?
Может так лучше?
Ну или если уж совсем припекло, вот ваш пример
!!!!!
и вообще пора бы уже забыть про float, давно есть свойство display: flex, которое сейчас все браузеры жрут, если поддержка ie8 не нужна

Лаконично и понятно, никаких вопросов возникнуть... не должно
P.S если есть верстка, смотреть только последние 2 урока, вашу верстку насадить займет от силы 2 часа

1) картинка в png
1.1) width 100%
2) onclick css top 0
3) onclick change bg
4) просто написать в тегах p и отстилизовать
5) svg или canvas
если Вам непонятно, что я написал, то просто закажите, все равно сами только через недели 3 сделаете, а такую скучную, но довольно громоздкую задачу Вам вряд ли кто здесь напишет

<div class="clearfix">
    <div class="left">
        <div class="center"></div>
    </div>
    <div class="right"></div>
</div>

.left{
  float:left;
  width: 80%;
}
.right{
  float: right
  width: 20%;
}
.center{
  width: свое
  margin: 0 auto;
}

Так же погуглите, что такое clearfix, долго объяснять

Ошибка в синтаксисе

$('iframe').click(function(){ 
    $('form.1').fadeIn();
    $('form.fake').fadeOut();
      });

либо

$('iframe').on('click', function(){ 
    $('form.1').fadeIn();
    $('form.fake').fadeOut();
      });

Это почему клик не отрабатывает, а что касается открытия div'a, снизу правильно написали, нужно в абсолюте прозрачный блог поверх фрейма повесить и обрабатывать клик при нажатии на него