Как выровнять правильно несколько блоков?

Question

[Роман]

Требуется расставить блоки в таком виде.

<div class="main1">
<h1> Заголовок</h1> 
</div>
<div class="main2">
  <div class="blue"></div>
    <div class="green"></div>
  <div class="red">  </div>
    </div>

.blue {    width: 60%;}
.green{   width: 65%;}
.red{
position: relative;
top: -513px;
left: 635px;}

Но это кажется не правильным решением. посоветуйте, пожалуйста как правильно?
HTML менять нельзя... cms(

Answer 1

[Андрей Федоров]

codepen.io/aliencash/pen/bpmKbw
правда не понятно, на картинке это вы так коряво нарисовали или должны быть такие кривые отступы...

Comments

[Андрей Федоров]

заморочился...
codepen.io/aliencash/pen/VaEdZJ

[Антон Нагаец]

Андрей Федоров: Неправильная формулировка. Не заморочился, а извратился с отступами. )))

[Роман]

Андрей Федоров: спасибо! интересный подход, почитаю про него. Я коряво нарисовал)

Answer 2

[Павел Гоголинский]

Я бы сделал два инлайн блока. В первый бы поместил заголовок, синий и желтый, во второй – красный

Comments

[Роман]

HTML менять нельзя... cms(