Collapse divs vertically CSS

Question

I'm working on a website and I've this code

.container {
  width: 100%;
  margin:0 auto;
}

.container div {
  width: 25%;
  display: inline-block;
  vertical-align:top;
  background: lightblue;
  border: 1px solid black
}

<div class="container">
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo nisi, sit eius provident, vitae, quisquam impedit dolore ad aperiam incidunt optio consequuntur aliquam facilis hic ullam! Quisquam tempora, fuga numquam.</p>
  </div>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quod, ipsa quidem natus quis quam odit molestiae sit, debitis amet expedita fugiat nesciunt at modi eos, porro laborum quas optio.</p>
  </div>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis, necessitatibus alias atque nulla praesentium dolorem, dignissimos autem culpa placeat quae doloribus unde illo fugiat! Delectus quia recusandae aperiam est eligendi quae doloribus unde illo fugiat! Delectus quia recusandae aperiam est eligendi.</p>
  </div>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora labore optio placeat aperiam facilis recusandae velit, minus modi quo dolores molestias in ratione officia accusantium, reiciendis porro, ipsam, repellendus atque!</p>
  </div>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quisquam ratione ducimus temporibus rerum, voluptatum facilis repellat quos nostrum commodi adipisci hic libero, rem optio consequatur tempora sed sequi voluptas!</p>
  </div>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio dolor nobis veritatis deserunt voluptate illum, voluptatibus consequuntur optio autem sint, accusamus ipsam, quidem nesciunt doloribus similique doloremque magni dolorem. Animi.</p>
  </div>
</div>

I want my divs collapse vertically like this image :

I try to add a float: left; but it does not work. Thanks for your help !

as a sidenote `width: calc(100%/4)` it's simply `width:25%`, anyway http://stackoverflow.com/questions/8470070/how-to-create-grid-tile-view-with-css — Fabrizio Calderan, Feb 29 '16 at 12:56

score 1 · Answer 1 · answered Feb 29 '16 at 13:02

1

Add flex properties to your .container class.

.container {
  width: 100%;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
}

answered Feb 29 '16 at 13:02

Fazil Abdulkhadar

1,091
5
11

I want to keep the same height tho – Corentin Branquet Feb 29 '16 at 13:03
Could you please provide more details ?. – Fazil Abdulkhadar Feb 29 '16 at 13:06
Divs must have a height adapting with text inside. Then I want to collapse margin between divs like the picture – Corentin Branquet Feb 29 '16 at 13:09

score 0 · Answer 2 · answered Feb 29 '16 at 13:02

0

It is not that easy to achieve with few lines of html + css when you don't want to use flexbox. I suspect you should give a try this plugin: http://masonry.desandro.com/

answered Feb 29 '16 at 13:02

szromek

153
10

Collapse divs vertically CSS

2 Answers2