How to ignore the margin inline blocks create with different heights?

Question

I have an issue where the blocks stack by 2, and the next 2 blocks start at the end of the first 2 blocks. As shown in this JSFiddle demo.

HTML:

<div class="container">
  <div class="inline">
  A div with less content than that one >
  </div>
  <div class="inline">
  A div with more content than the one on the left. Now Inline 3 goes down to where this div ends. I want to move it up however, so it's right under the div that's above Inline 3.
  </div>
  <div class="inline">
  Inline 3
  </div>
  <div class="inline">
  Inline 4
  </div>
</div>

CSS:

.container {
  width:600px;
  background-color:rgb(40,40,40);
}

.inline {
  width:calc(50% - 22px);
  display:inline-block;
  vertical-align:top;
  color:white;
  background-color:#e74c3c;
  text-align:center;
  margin:5px 10px;
}

Output:

Note: This doesn't take up the white space created by the top-right div.

Expected/wanted output:

Note: This does make use of the whitespace.

I'm aware that this is possible with 2 columns, but I don't want to use 2 columns. Because I must be able to remove some div's without having unequal content in the columns.

score 1 · Accepted Answer · answered Dec 16 '15 at 08:47

1

I had the same problem at the website i created. i used masonry to solve that: http://masonry.desandro.com/

answered Dec 16 '15 at 08:47

brandelizer

342
3
17

score 0 · Answer 2 · answered Dec 16 '15 at 08:57

0

you can try using column-count property,

be aware the items will be ordered in column descending order.

fiddle

answered Dec 16 '15 at 08:57

maioman

18,154
4
36
42

The positioning is okay, but I don't want the items to be re-ordered. It will be confusing as the content is created dynamically, like this: https://jsfiddle.net/rezf2mbs/11/ – Daan Dec 16 '15 at 09:16
Couldn't this be applied based on rows, instead of columns? – Daan Dec 16 '15 at 09:20
have you tried masonry? – maioman Dec 16 '15 at 10:54
Trying it now @maioman – Daan Dec 16 '15 at 10:55

Florent Chatterji · Answer 3 · 2015-12-16T09:36:31.010

0

Make the div with more content float to the right by adding a second class to it.

HTML

<div class="inline right">
  A div with more content than the one on the left. Now Inline 3 goes 
  down to where this div ends. I want to move it up however, so it's 
  right under the div that's above Inline 3.
</div>

CSS

.right {
  float: right;
}

fiddle

edited Dec 16 '15 at 09:36

answered Dec 16 '15 at 09:13

Florent Chatterji

355
3
17

How to ignore the margin inline blocks create with different heights?

3 Answers3