Проблема с float ... Как поставить блок на своё место?

Question

[NickBetali]

Код

codepen.io/Flame220/pen/VYxBvK?editors=110

или

<section class="section clearfix">
      <div class="box-about"></div>   
      <div class="box-history"></div> 
      <div class="box-coffee"></div>
      <div class="box-online"></div>
      <div class="box-friends"></div>  
      <div class="box-social"></div>      
      <div class="box-order"></div>     
 </section>

.section {
  width: 80%;
  position: relative;
  margin: 1% auto;
  box-sizing: border-box;
}
.section div {
  border-radius: 10px;
}
.box-about {
  width: 20%;
  padding: 8% 0;
  float: left;
  background: #8bc34a;
}

.box-history {
  width: 20%;
  padding: 8% 0;
  float: left;
  background: #2196f3;
}
.box-coffee {
  width: 20%;
  padding: 16% 0;
  float: left;
  background:  #ffeb3b;
}
.box-online {
  width: 40%;
  padding: 8% 0;
  float: left;
  background: #f44336;
}
.box-social {
  width: 40%;
  padding: 15.5% 0;
  float: left;
  background: #e91e63;
}
.box-friends {
  width: 40%;
  padding: 8% 0;
  float: left;
  background: #4caf50;
}
.box-order {
  width: 60%;
  padding: 7.5% 0;
  float: right;
  background:  #3f51b5;
}

Answer 1

[Андрей]

Самое простое и очевидное: укажите ему margin-top: -16% (высота зеленого блока)

upd
Другое решение: перекомпоновать верстку, так чтобы все блоки обтекали желтый слева и справа:
codepen.io/standys/pen/VYxBJy?editors=110

Comments

[NickBetali]

Возможно это сделать без margin, а только с примененем float?

[Андрей]

NickBetali: да, можно, но нужно поменять некоторые блоки местами, и обтекать отдельно влево и вправо, дописал в ответ

[NickBetali]

Спасибо)))

[Андрей]

NickBetali: Если решение работает, то почему правильным отмечен другой ответ?

Answer 2

[Андрей Б.]

С флоатом у вас нечего не выйдет, для такой сетки используйте плагин masonry или ему подобные.

Answer 3

[Константин Феофантов]

.box-social {
  width: 40%;
  padding: 15.5% 0;
  float: left;
  background: #e91e63;
  position: absolute;
  margin-top: 16%;
}

Answer 4

[NickBetali]

Возможно это сделать без margin, а только с примененем float?

Comments

[Роман Якушев]

в общем нет. а собственно чем ваш смущает margin? есть ещё position: relative и top:-16%. Я подозреваю что вы хотите только float из за адаптивности? ну и меняйте так же значение margin-top, на различных экранах.

Answer 5

[Anton Kolesnikov]

Без костылей типо отрицательного флоата или разделения блоков по разным оберткам ничего не получится. Как уже писали выше тут только masonry плагины помогут.