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

Question

[Question1234567]

Помогите правильно написать код, чтобы блоки заполняли оставшееся пространство.
Пример ниже

<div class="wrapper">
  <div class="top">
    Top
  </div>
  <div class="bottom">
    Bottom
  </div>
  <div class="block">
    Block
  </div>
  <div class="littleblock">
    Littleblock
  </div>
</div>

body {
  padding: 0px;
  margin: 0px;
}
.wrapper {
  background: #FDF5E6;
  width: 1000px;
  height: 900px;
  margin: 0 auto;
  text-align: center;
  font-family: sans-serif;
}
.top {
  background: #DA70D6;
  width: 1000px;
  height: 100px;
}
.bottom {
  background: #CD853F;
  width: 1000px;
  height: 200px;
}
.block {
  background: #9ACD32;
  width: 500px;
  height: 300px;
}
.littleblock {
  background: #FF7F50;
  width: 500px;
  height: 300px;
}

Littleblock должен идти после Block правее, но спускается ниже.

Answer 1

[Ленар Фаттахов]

jsfiddle.net/quczyk2g