How do you restrict specific content to only one column instead of going across multiple columns?

Question

I'm trying to restrict each header and paragraph to only be apart of one column instead of auto formatting to go to the next column when it runs out of room.

.columns {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}

.div1  {
    width: 100%;
    padding: 10px;
    border-right: 2px solid;
    border-left: 2px solid;
    margin: 0;
    background-color: white;
}

<div class="div1">
    <div class="columns">
        <h4>Landscaping</h4>
        <p>As Northeast Ohio Landscapers, Hemlock Landscapes has been caring for customers and their properties throughout the Chagrin Valley since 1981.
        Our core values:
        Bring a positive attitude with you each and every day
        Work hard, pitch in, be helpful and productive
        Be fair and respectful with all people in all encounters</p>

        <h4>Services</h4>
        <p>When it comes to Residential Landscape Maintenance in Northeast Ohio, we have a pretty simple mission.
        Our mission is to unite people in positive relationships to improve lives.
        This includes not only our great customers but also our fantastic employees and vendors that we work with each and every day.  If we are not improving your life then we are not living up to our mission.
        Experienced in every facet of the landscape industry, we fulfill our one company… total care philosophy by meeting your every need in the following areas:
        Residential Landscape Maintenance
        Landscape Design/Installation
        Plant Health Care</p>

        <h4>Mission</h4>
        <p>Whether you are new to the Chagrin Valley, switching landscape service providers, or need to add a service to your existing account, Hemlock Landscapes makes it easy for you.</p>
    </div>
</div>

score 2 · Answer 1 · 2016-10-06T05:50:48.597

Use the break-inside: avoid; CSS property.

.columns {
 -webkit-column-count: 3;
 -moz-column-count: 3;
 column-count: 3;
}

.div1  {
 width: 100%;
 padding: 10px;
 border-right: 2px solid;
 border-left: 2px solid;
 margin: 0;
 background-color: white;
}

/* USE THIS CLASS ON A DIV SURROUNDING THE HEADER AND CONTENT */
.nobreak {
  break-inside: avoid;
}

<div class="div1">
<div class="columns">
<div class="nobreak">
<h4>Landscaping</h4>
<p>As Northeast Ohio Landscapers, Hemlock Landscapes has been caring for customers and their properties throughout the Chagrin Valley since 1981.
Our core values:
Bring a positive attitude with you each and every day
Work hard, pitch in, be helpful and productive
Be fair and respectful with all people in all encounters</p>
</div>

<div class="nobreak">
<h4>Services</h4>
<p>When it comes to Residential Landscape Maintenance in Northeast Ohio, we have a pretty simple mission.
Our mission is to unite people in positive relationships to improve lives.
This includes not only our great customers but also our fantastic employees and vendors that we work with each and every day.  If we are not improving your life then we are not living up to our mission.
Experienced in every facet of the landscape industry, we fulfill our one company… total care philosophy by meeting your every need in the following areas:
Residential Landscape Maintenance
Landscape Design/Installation
Plant Health Care</p>
</div>

<div class="nobreak">
<h4>Mission</h4>
<p>Whether you are new to the Chagrin Valley, switching landscape service providers, or need to add a service to your existing account, Hemlock Landscapes makes it easy for you.</p>
</div>
</div>
</div>

When I did this my second column information flooded over into the third column instead of expanding downwards. I'm not sure if this is from the bootstrap carousel style sheet or if it is something else. — ChaCol, Oct 06 '16 at 07:23

score 2 · Accepted Answer · answered Oct 06 '16 at 05:39

2

Set a display: inline-block to each <p> element. This way, they will be self-contained in their respective column. But please bear in mind that this will not prevent the header from spilling to other columns, as seen in this image:

But, if you can wrap each header-column pair with a <div>, then you will just have to apply the display: inline-block; to that container, as seen in this image:

Or, as torazaburo pointed out, you could use break-inside: avoid; to prevent the splitting of the element. I'm used to using display: inline-block as it also trims unwanted size from the elements and make them easier to manage (in this case, it even make sense to have them like that as you are declaring a column layout), but the other property provides the exact same feature for your specific case.

answered Oct 06 '16 at 05:39

Antonio Hernández

466
2
10

So when I use my website on Google Chrome this format is no longer applied. How can I fix this? – ChaCol Oct 06 '16 at 09:09
What do you mean by it's not longer applied? Does any property wasn't recognized by the browser? And if so, which ones? Or is it that the CSS no longer works at all? The testing of these properties was done on Chrome, so your question puzzles me a bit. Prob you used `break-inside: avoid`, if so, switching to `display: inline-block;` solved your issue? – Antonio Hernández Oct 06 '16 at 09:14
http://imgur.com/a/1faUC For whatever reason it breaks the formatting of my columns in Chrome but it works in Mozilla and IE. This was using your method of inline-blocks. – ChaCol Oct 06 '16 at 09:21
Changing the width doesn't seem to do anything. I can change the width to make it smaller and it kind of just overlaps the text, however making it larger does nothing. It kind of seems like it is just recognizing the page as only 1 or 2 columns instead of 3 or something. I'm not quite sure what it is doing. – ChaCol Oct 06 '16 at 09:30
Just updated your fiddle. We'll switch completely to using `display: table;`, `display: table-row;` and `display: table-cell;`. With this, your main goal will be achieved completely. These will behave just like a table, but without actually using one. It's a pretty slick property for creating neat structured layouts :) This is the new fiddle: https://jsfiddle.net/6cLgp11a/ – Antonio Hernández Oct 06 '16 at 09:41
Can you still use the column-gap attribute or is there a different one for tables? – ChaCol Oct 06 '16 at 09:49
Nope, but you can tweak around the padding of the table-cells, it behaves just like the column gap, as the cells always have the same width. Updated link of my fiddle on previous comment, feel free to check it to see the padding in action. **Update:** Can't edit the previous one, here is the fiddle: https://jsfiddle.net/Ahm7777/by3yaaf3/ – Antonio Hernández Oct 06 '16 at 09:55

How do you restrict specific content to only one column instead of going across multiple columns?

2 Answers2