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

Question

[jelezo]

Какое свойство нужно прописать последнему блоку, чтобы он встал на место пустой области над ним?


В данный момент структура такая:

<div id="second-main" class="clearfix">
                        <div class="b6"></div>
                        <div class="b7"></div>
                        <div class="b8"></div>
                        <div class="b9"></div>
                        <div class="b10"></div>
                        <div class="b11"></div>
                        <div class="b12"></div>
</div>

Стили заданные для блоков:

.b6{
    width: 330px;
    height: 157px;
    float: left;
    margin-right: 20px;
}
.b7{
    width: 353px;
    height: 600px;
    float: left;
    margin-right: 17px;
}
.b8 {
	width: 230px;
    height: 290px;
    margin-right: 20px;
    float: left;
    margin-bottom: 20px;
}
.b9 {
	width: 230px;
    height: 290px;
    float: right;
    margin-bottom: 20px;
}
.b10 {
	width: 230px;
    height: 290px;
    margin-right: 20px;
    float: left;
}
.b11 {
	width: 230px;
    height: 290px;
    float: right;
}
.b12 {
	width: 330px;
    height: 420px;
    float: left;
}

Answer 1

[jelezo]

В общем решил проблему путём обёртвания .b6 и .b12 в один div, переписав к нему свойства от .b6

Answer 2

[Stalker_darkway]

Таблицы, inline-block

Answer 3

[Valery]

Конкретно в данном случае достаточно будет
margin-top: -420px для .b12

Но вообще для таких целей лучше использовать Masonry