enter image description here

Help Float scatter blocks, one always drops down.

<div class="portfolio-items"> <div class="portfolio-item_5"></div> <div class="portfolio-item_6"></div> <div class="portfolio-item_7"></div> <div class="portfolio-item_8"></div> <div class="portfolio-item_9"></div> </div>

https://jsfiddle.net/rq1gmv9r/

  • one
    Can you give more details? Most likely the problem is in the width of the blocks. If their total width is greater than the width of the container in which they are located, then naturally those that do not fit will slide down. Set the minimum width for the min-width container. - Alexey Vladimirovich

1 answer 1

Html:

  <div class="portfolio-items"> <div class="leftbox"> <div class="portfolio-item_5">1</div> <div class="portfolio-item_9">5</div> </div> <div class="portfolio-item_6">2</div> <div class="portfolio-item_7">3</div> <div class="portfolio-item_8">4</div> </div>

Css:

 .portfolio-items{ width: 100%; } .portfolio-item_5{ width: 100%; height: 250px; background-color: #e1d8cf; float: left; } .portfolio-item_6{ width: 33.33333%; height: 500px; background-color: #ece8cc; float: left; } .portfolio-item_7{ width: 33.33333%; height: 250px; background-color: #513c4b; float: left; } .portfolio-item_8{ width: 33.33333%; height: 250px; background-color: #d7c5ba; float: right; } .portfolio-item_9{ width: 100%; height: 250px; background-color: #f0d93e; float: left; } .leftbox{ width : 33.3333%; height : 500px; float: left; }
  • But really do without adding a block ?? - Artem
  • Of course, @Artem can be, for example, positioning them completely. But it seems to me that in your case this is not the best solution. More like crutches) - Alexey Vladimirovich
  • @Artem may be on the float without a wrapper solution, but I do not see it - Alexey Vladimirovich