Column count cuts image in half

Question

I have a large section of text on a page and when the screen is larger, I have media queries to make the text form columns. However, when I do this, some of the photos don't fully go to into one column.

For whatever reason it will split the photo and show a portion of it at the bottom of one column and the rest of it in the next column. This also happens with divs. If I swapped the white feature div and the image, then it also splits itself.

Here's a portion of my code with a quick example:

.content-heading h1{
	border-top: 10px solid;
	margin-top: 100px;
	padding-top: 15px;
	line-height: 1;
	display:  inline-block;
}
.content-heading h2{
	padding-bottom: 15px;
	margin-bottom: 50px;
}
.img-box{
	background-position: center top;
	background-size:cover;
	border-radius: 8px;
	height: 250px;
	width: 250px;
	border: 8px solid #fff;
}
.container-fluid.no-pad{
  padding:0;
}
#youth-development{
    color:  #fff;
    position:  relative;
    background: rgba(244, 121, 32, 1);
}
#youth-development h1{
    border-top: 10px solid #fff;
    padding-top: 15px;
    margin-top: 0;
    display:  inline-block;
    padding-right: 99px;
}	
#youth-development h2{
	padding-bottom: 15px;
}
#youth-development .column-content{
  column-count:2;
	padding-bottom: 100px;
}
#youth-development ul{
    list-style-type: none;
    padding-left: 10px;
    color: #fcaf18;
    font-size: 20px;
}
#youth-development .img-box{
	background-image: url('http://www.fillmurray.com/200/300');
	float: left;
	margin-right:  20px;
}
#youth-development .feature-p{
	float: right;
    width: 400px;
    background-color: #fff;
    color: #6d6d6d;
    padding: 15px;
    border-radius: 8px;
}
#youth-development .feature-p h4{
    color: #f57920;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid no-pad">
<section id="youth-development">			
    <div class="row no-gutters justify-content-center">
      <div class="col-sm-10 content-heading">
        <h1>Safety Around Water</h1>
        <h2>For Youth Development</h2>
      </div>
    </div>
    <div class="row no-gutters justify-content-center">
      <div class="col-sm-10 column-content">								
        <div class="feature-p">
          <h4>The statistics are shocking:</h4>
          <ul>
            <li>- Children ages 1 to 4 have the highest drowning rates.</li>
            <li>- For kids under age 12, drowning is the second leading cause of accidental death.</li>
            <li>- Two children die every day because of drowning.</li>
          </ul>
        </div>
        <p>Drowning can happen nearly anywhere with standing water. Every child deserves to know
        how to be safe around water. As America’s swim instructor, and one of the most accessible
        community resources to prevent drowning, YMCAs across the country have committed to
        helping children learn the invaluable skill of swimming and water safety through a variety of
        programs.</p>

        <p>Safety Around Water is a grant-funded program that helps children learn how to perform a
        sequenced set of skills over eight lessons of 40 minutes each. During that time the risk of
        drowning is reduced and children are given confidence in and around water.
        A typical session includes exercises to help kids adjust to being in water; instruction in
        “Jump, Push, Turn, Grab” and “Swim, Float, Swim,” two skill sets kids can use if they
        unexpectedly find themselves in the water; and specific safety topics, like what to do if you
        see someone in the water who needs help. Participants also have fun in the process!
        In 2017, 1,608 children were served through Safety Around Water at Jerry Long, William G.
        White, Jr., Kernersville, Davie, Stokes, and Statesville Family YMCAs. Additionally, Wilkes
        Family YMCA provides 400 pre-K students with swimming lessons through United Way
        Funding.</p>
        <div class="img-box"></div>	
        <p>Through a longstanding partnership with Davie County Schools, every second grader visits
        the Davie Family YMCA for the Safety Around Water program. Ethan was one of those
        students who first learned to swim at the Y. He started off in the beginner class but was
        eager to swim and made it his goal to wear a green band and be able to swim anywhere in
        the pool by himself. A green band is the designation given to child who passed the YMCA
        Swimmer Classification Test. In four days, Ethan learned rhythmic breathing, front stroke,
        backstroke, and how to be safe around water. Ethan is now confident around water and
        increased his knowledge of boating safety. </p>

        <p>He left the Second-Grade Safety Around Water program with his green band and is now
        competing for the YMCA Tyde swim team. After learning all four competitive strokes
        (breaststroke, backstroke, freestyle, butterfly), Ethan is helping new swimmers who join
        Tyde. Ethan and his family come to the Davie Family YMCA to swim for fun and Ethan’s little
        brother is learning to swim. </p>

        <p>Swim lessons are the next step in helping children not only stay safe, but also develop a
        lifelong love of the water. Across the Association, 3,370 individuals were served through
        swim lessons in 2017.</p>						
      </div>					
    </div>
		
</section>
</div>

I turn the text from 1 column, to 2, then 3, so trying to manually divide up the text into bootstrap columns would be difficult for what I'm trying to achieve. Is there anyway to get around this column-count issue?

Smokechaser

.row should be inside a .container or .container-fluid. Start by fixing that I'd say – Carafe

@Carafe Yeah all the sections are inside one in my normal code, just forgot to add it for the sake of this snippet. Done. – Smokechaser

Answer 1

You can use page-break-inside: avoid; on the elements that shouldn't be split. (column-break is treated like page-break)

Regardless

Answer 2

CSS changes needed are as follows:

-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */

page-break-inside: avoid; /* Firefox */

break-inside: avoid; /* IE 10+ */

Please check the Link to understand things better.

Cheapen

Answer 3

It is splitting the text based on the text kerning, and the image position is higher than the kerning. It depends how the browser does it. Firefox seems to work fine, Chrome doesn't. One solution might be to add some vertical padding on the div.

Borehole

Answer 4

Your bootstrap tags need some work. Here is a link to an example that has columns like so:

• xs - sm: 1 column
• md+: 2 columns

The bootstap tags follow this pattern:

<div class="container>
  <div class="row">
    <div class="col-12 col-md-6">
    <div class="col-12 col-md-6">
  </div>
</div>

https://plnkr.co/edit/T1AhrX7NYRspiC29Jc75?p=preview

The css you're using is working against some of what bootstrap is trying to do. You'll need to re-work some of that once you get the bootstap tags setup properly.

Reluct

That's why I added this part in my explanation: I turn the text from 1 column, to 2, then 3, so trying to manually divide up the text into bootstrap columns would be difficult for what I'm trying to achieve. If I was only going to be splitting it into 2 columns, I would use this method. But since it's going to go up to 3, it wouldn't really work because the text wouldn't flow right. – Smokechaser