CSS two column layout breaks the last div of first column

Question

I want to create a two-column gallery of photos, each with a different height, and with a footer with some explanation.

I have created the two column section, a card container, and placed inside this one the image and a div with the footer.

The result in Chrome shows the last card container of the first column to be broken, i.e. separated in two: on the first column the image, on the second column the footer.

https://i.stack.imgur.com/llqoC.jpg

#columns {
  line-height: 0;
  display: block;
  column-count:         2;
  column-gap:           100px;

  }

  #columns .container {
    width: 100% ;
    height: auto ;
    margin-bottom: 15px;
    border-radius: 15px;
    border-width: 1px;
    background-color: lime;
    padding: 3px;
    overflow:hidden;

  }

  #columns img {
    overflow: hidden;
  }


  .footer{
    color: darkslategrey;
    position: relative;
    margin: 5px;
    bottom: 0px;
    right: 0px;
    text-align:center;
  }

<section id="columns">
<div class="container">
  <img  src="http://via.placeholder.com/350x150">
  <div class="footer">
    <img  src="http://via.placeholder.com/50x50">
    Footer #1
  </div>

</div>

<div class="container">
  <img  src="http://via.placeholder.com/350x120">
  <div class="footer">
    <img  src="http://via.placeholder.com/50x50">
    Footer #2
  </div>

</div>

<div class="container">
  <img  src="http://via.placeholder.com/350x130">
  <div class="footer">
    <img  src="http://via.placeholder.com/50x50">
    Footer #3
  </div>

</div>

Help much appreciated :)

Add [`break-inside: avoid`](https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside) to the `#columns .container` styles. — Niet the Dark Absol, May 08 '18 at 08:27
I've tried both of the solutions and, of course, they are working, but it's interesting to see that depending on the sizes of the container to render, each solution provides a different layout. Given two containers of different height: `break-inside: avoid-column` displays two containers one on top of the other `display: inline-block;` displays one container in each column — Rafael Morillo, May 08 '18 at 09:27
Possible duplicate of [How to prevent column break within an element?](https://stackoverflow.com/questions/7785374/how-to-prevent-column-break-within-an-element) — Krzysztof Janiszewski, May 08 '18 at 13:59

score 0 · Answer 1 · answered May 08 '18 at 08:26

0

add display: inline-block; in #columns .container

answered May 08 '18 at 08:26

pk_tan777

351
1
3

score 0 · Answer 2 · answered May 08 '18 at 08:28

How to prevent column break within an element?

Add break-inside: avoid-column; to your .container div.

#columns {
  line-height: 0;
  display: block;
  column-count: 2;
  column-gap: 100px;
}

#columns .container {
  width: 100%;
  height: auto;
  margin-bottom: 15px;
  border-radius: 15px;
  border-width: 1px;
  background-color: lime;
  padding: 3px;
  overflow: hidden;
  break-inside: avoid-column;
}

#columns img {
  overflow: hidden;
}

.footer {
  color: darkslategrey;
  position: relative;
  margin: 5px;
  bottom: 0px;
  right: 0px;
  text-align: center;
}

<section id="columns">
  <div class="container">
    <img src="http://via.placeholder.com/350x150">
    <div class="footer">
      <img src="http://via.placeholder.com/50x50"> Footer #1
    </div>
  </div>

  <div class="container">
    <img src="http://via.placeholder.com/350x120">
    <div class="footer">
      <img src="http://via.placeholder.com/50x50"> Footer #2
    </div>
  </div>

  <div class="container">
    <img src="http://via.placeholder.com/350x130">
    <div class="footer">
      <img src="http://via.placeholder.com/50x50"> Footer #3
    </div>
  </div>

CSS two column layout breaks the last div of first column

2 Answers2