4

I have a container with lot of div displayed inline block. But when one of these divs is taller than the others, all the divs in the same line has some blank space on the top.

    .all {
        text-align: center;
    }
    .a {
        width: 200px;
        height: 200px;
        background: red;
        margin: 20px;
        display: inline-block;
    }
    .b {
        height: 100px;
    }

The problem.

This is what I'm trying to achieve.

I dont know how to do that.

nicael
  • 18,550
  • 13
  • 57
  • 90
ler
  • 1,466
  • 3
  • 20
  • 37
  • 2
    Could you put the problem in a jsfiddle? – frenchie Nov 22 '15 at 14:28
  • Adding the demo won't hurt though. – nicael Nov 22 '15 at 14:28
  • 1
    Looks like css flexbox could be your friend here, but that depends on setup: Could you a) number the red blocks to explain in which order you want them displayed? b) explain some of the constraints you are trying to achieve? (All columns should always be equal height? Fixed column height? Divs stretched vertically to ensure the columns are equal height? Fixed number of columns?) c) provide a demo (code instead of picture)? – wintvelt Nov 22 '15 at 14:40
  • 1
    Not sure how this got 3 upvotes when this question is being asked for like 100 times – Mr. Alien Nov 22 '15 at 15:26

3 Answers3

1

It's not possible to do exactly what you pictured in HTML/CSS alone while providing any sort of flexibility or ease of reproduction, although there is a neat Javascript library called Packery that does exactly what you want.

http://packery.metafizzy.co/

EDIT:

Here's a working example of what you're after using Packery, with the newer versions you don't actually need to write any Javascript which makes the bar for entry much lower.

http://jsfiddle.net/s9crmo9d/8/

<div id="container" class="js-packery"
  data-packery-options='{ "itemSelector": ".item", "gutter": 10 }'>

    <div class="item red small"></div>
    <div class="item green large"></div>
    <div class="item orange small"></div>
    <div class="item red large"></div>
    <div class="item green large"></div>
    <div class="item orange large"></div>
    <div class="item red large"></div>
    <div class="item green large"></div>
    <div class="item orange small"></div>

</div>

This could be considered a duplicate as well although he wasn't specifically asking for a CSS based masonry layout.

Is it possible to use flexbox/CSS to create a masonry layout?

Community
  • 1
  • 1
Tim Sheehan
  • 3,994
  • 1
  • 15
  • 18
  • This is not an answer. 1) it's just a link 2) OP asks for CSS. 3) dupe? flag as such. – nicael Nov 22 '15 at 14:28
  • @nicael It's not possible in CSS alone to allow different sized containers to be packed together like that - so it IS an answer. I'm not sure if it an exact duplicate as he's not specifically asking to recreate masonry, it just happens to be similar to what he's put in his picture. – Tim Sheehan Nov 22 '15 at 14:29
  • @Dontfeedthecode thanks man, thats what i'm looking for. – ler Nov 22 '15 at 16:56
  • @Dontfeedthecode one more question, how can i stop div changing there positions, because when i refresh the page divs change there postions. – ler Nov 22 '15 at 17:14
  • @ler I'm not sure what you mean the positions stay the same in my example, you will have to put a jsfiddle of your own up somewhere. – Tim Sheehan Nov 22 '15 at 23:14
0

If I were You, I would try do that in a different way.Try to look at Your idea as a 4 columns(divs) with "display-inline: block" property each.Then inside Your divs place other divs with properties You wish.I see only that solution with pure CSS and no additional plugins or frameworks.Don't forget to add a "margin-bottom" property to each of Your "block" inside column.

Sebastian
  • 97
  • 1
  • 6
0

You've already set height for container 2 more than container 1 try using this:

.all {
        text-align: center;
    }
    .a {
        width: 200px;
        min-height: 100px;
        background: red;
        margin: 20px;
        display: inline-block;
    }
    .b {
        height: 100px;
    }
Peter Badida
  • 11,310
  • 10
  • 44
  • 90
Sudhanshu
  • 21
  • 3