CSS: keep the blocks inseparable when passing to a new column

Question

I have the following (codepen)

.container{column-count:2; width: 50%; border: 1px solid;}
.entry{border: 1px dotted red;}

<div class="container">
  <div class="entry">
    <h3>header 1</h3>
    <div class="item">item 1</div>
    <div class="item">item 2</div>
    <div class="item">item 3</div>
  </div>
  <div class="entry">
    <h3>header 1</h3>
    <div class="item">item 1</div>
    <div class="item">item 2</div>
    <div class="item">item 3</div>
  </div>
  <div class="entry">
    <h3>header 1</h3>
    <div class="item">item 1</div>
    <div class="item">item 2</div>
    <div class="item">item 3</div>
  </div>
  <div class="entry">
    <h3>header 1</h3>
    <div class="item">item 1</div>
    <div class="item">item 2</div>
    <div class="item">item 3</div>
  </div>
  <div class="entry">
    <h3>header 1</h3>
    <div class="item">item 1</div>
    <div class="item">item 2</div>
    <div class="item">item 3</div>
  </div>  
</div>

is there a way to keep the "red" blocks to be inseparable? I mean, pass to the second column entirely, as a whole block?

@Terry unfortunately the "duplicate" solutions don't solve the problem... — serge, Apr 26 '18 at 09:40
Yes it does, as per this answer: https://stackoverflow.com/a/17415553/395910. Apply it to the `.entry` element, not the parent. — Terry, Apr 26 '18 at 09:57

score 2 · Accepted Answer · answered Apr 26 '18 at 09:18

2

Adding display: inline-block to the entry class should work. CSS:

.container{
  column-count: 2; 
  width: 50%; 
  border: 1px solid;
}
.entry{
  border: 1px dotted red;
  display: inline-block;
  width: 100%;
 }

answered Apr 26 '18 at 09:18

Arvind Muthuraman

2,957
1
12
11

as you can see, I need 2 columns... did you try your solution? – serge Apr 26 '18 at 09:36
Here is the implementation https://codepen.io/arvindm95/pen/PeGWwJ. If this is not what you intended to do, explain elaborately what you want. – Arvind Muthuraman Apr 26 '18 at 09:43
ah, i didn't remark the `width: 100%;` :) yes, is better now – serge Apr 26 '18 at 12:02
Glad it helped! Please, consider accepting my answer. – Arvind Muthuraman Apr 26 '18 at 12:29
ok, I will accept your answer, it was nice from you. But to note I did use the @Terry duplicate answer's solution for my needs. – serge Apr 27 '18 at 07:34

CSS: keep the blocks inseparable when passing to a new column

1 Answers1