Css3 Columns - Force Non Breaking/Splitting Element

CSS3 Columns - Force non breaking/splitting element?

Add display:inline-block; to the item you want to prevent from splitting.

How to prevent column break within an element?

The correct way to do this is with the break-inside CSS property:

.x li {
    break-inside: avoid-column;
}

Unfortunately, as of October 2021, this is still not supported in Firefox but it is supported by every other major browser. With Chrome, I was able to use the above code, but I couldn't make anything work for Firefox (See Bug 549114).

The workaround you can do for Firefox if necessary is to wrap your non-breaking content in a table but that is a really, really terrible solution if you can avoid it.

UPDATE

According to the bug report mentioned above, Firefox 20+ supports page-break-inside: avoid as a mechanism for avoiding column breaks inside an element but the below code snippet demonstrates it still not working with lists:

.x {
    column-count: 3;
    width: 30em;
}

.x ul {
    margin: 0;
}

.x li {
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside:avoid;
    -moz-page-break-inside:avoid;
    page-break-inside: avoid;
    break-inside: avoid-column;
}

<div class='x'>
    <ul>
        <li>Number one, one, one, one, one</li>
        <li>Number two, two, two, two, two, two, two, two, two, two, two, two</li>
        <li>Number three</li>
    </ul>
</div>

Split div into multiple columns without breaking child elements

Use display: flex; styling for #sitemap.

Example snippet:

#sitemap {

  display: flex;

}

h6 {

  margin: 10px 0;

}

#sitemap .section {

  margin: 0 10px;

}

#sitemap a[href] {

    text-decoration: none;

    align-content: baseline;

    border-bottom: 1px solid transparent;

    transition: border-bottom-color 250ms 0ms cubic-bezier(0.4, 0, 0.2, 1);

    display: inline-block;

}

#sitemap a[href]:hover {

    border-bottom-color: #000;

}

#sitemap a[href] * {

    line-height: 1.1rem;

    vertical-align: middle;

}

#sitemap ul {

    list-style: none;

    padding: 0;

}

<div id="sitemap">

  <div class="section">

    <h6 class="mdc-typography--headline6">General</h6>

    <ul>

      <li>

        <a href="/login.php" class="mdc-typography--body1">

        Log in

        </a>

      </li>

      <li>

        <a href="/getstarted.php" class="mdc-typography--body1">

        Register

        </a>

      </li>

      <li>

        <a href="/getstarted.php" class="mdc-typography--body1"> Contact

        </a>

      </li>

      <li>

        <a href="/getstarted.php" class="mdc-typography--body1"> Blog

        </a>

      </li>

    </ul>

  </div>

  <div class="section">

    <h6 class="mdc-typography--headline6">Subjects</h6>

    <ul>

      <li>

        <a href="/login.php" class="mdc-typography--body1">

        Log in

        </a>

      </li>

      <li>

        <a href="/getstarted.php" class="mdc-typography--body1">

        Register

        </a>

      </li>

      <li>

        <a href="/getstarted.php" class="mdc-typography--body1">

        Contact

        </a>

      </li>

      <li>

        <a href="/getstarted.php" class="mdc-typography--body1">

        Blog

        </a>

      </li>

    </ul>

  </div>

</div>

How to stop columns splitting individual elements

I ended up getting rid of css columns and making a grid within a grid. The container div has:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(33em, 1fr));
}

and inside are div's around the label/input/span with:

.row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

It seems to work well unless the resolution gets really small. It will never become less than 3 columns (1 row) which hasn't been a problem so far.

Codepen:

https://codepen.io/j1dopeman/pen/gQWdvg

Prevent split cards in columns with CSS

You have to add break-inside: avoid; in the .card to prevent break the div but there is a problem with the shadow.

.card-col-2 {

  padding: 20px;

}

@media (min-width: 980px) {

  .card-col-2 {

    column-count: 2;

    column-gap: 100px;

    column-fill: auto;

    column-rule-style: solid;

    column-fill: auto;

  }

}

@media (max-width: 980px) {

  .card-col-2 {

    column-count: 1;

    column-gap: 100px;

    column-fill: auto;

    column-rule-style: solid;

    column-fill: auto;

  }

}

.card-col-2 .card {

  background-color: #fff;

  border: 1px solid gray;

  border-radius: 5px;

  padding: 15px;

  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);

  box-sizing: content-box;

  margin: 20px 0;

  height: 150px;

  break-inside: avoid;

}

.card-col-2 .card .pointer {

  border: 1px solid gray;

  width: 30px;

  height: 30px;

  transform: rotate(45deg);

  position: relative;

  z-index: -1;

  background-color: white;

}

.card-col-2 .card .pointer-left {

  left: -30px;

  top: 5px;

}

.card-col-2 .card .pointer-right {

  left: 470px;

  top: 5px;

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="card-col-2">

    <div class="card">

        <div class="row">

            <div class="col-md-8">

                <h2 class=""><i class="fa fa-graduation-cap fa-fw"></i> NMCT @ HoWest</h2>

                <p>Van September 2014 tot heden</p>

            </div>

            <div class="col-md-4">

                <img src="images/nmct.jpg" class="img-responsive"/>

            </div>

        </div>

    </div>

    <div class="card">

        <div class="row">

            <div class="col-md-8">

                <h2 class=""><i class="fa fa-graduation-cap fa-fw"></i> VDO Analyst programmeur @ Syntra West</h2>

                <p>Van September 2014 tot heden</p>

            </div>

            <div class="col-md-4">

                <img src="images/syntra.jpg" class="img-responsive"/>

            </div>

        </div>

    </div>

    <div class="card">

        <div class="row">

            <div class="col-md-8">

                <h2 class=""><i class="fa fa-child fa-fw"></i> Geboren</h2>

                <p>Op 7 Januarie 1994</p>

            </div>

            <div class="col-md-4">

            </div>

        </div>

    </div>

</div>

Is there a way to break a list into columns?

The CSS solution is: http://www.w3.org/TR/css3-multicol/

The browser support is exactly what you'd expect..

It works "everywhere" except Internet Explorer 9 or older: http://caniuse.com/multicolumn

ul {
    -moz-column-count: 4;
    -moz-column-gap: 20px;
    -webkit-column-count: 4;
    -webkit-column-gap: 20px;
    column-count: 4;
    column-gap: 20px;
}

See: http://jsfiddle.net/pdExf/

If IE support is required, you'll have to use JavaScript, for example:

http://welcome.totheinter.net/columnizer-jquery-plugin/

Another solution is to fallback to normal float: left for only IE. The order will be wrong, but at least it will look similar:

See: http://jsfiddle.net/NJ4Hw/

<!--[if lt IE 10]>
<style>
li {
    width: 25%;
    float: left
}
</style>
<![endif]-->

You could apply that fallback with Modernizr if you're already using it.

How do I force my CSS3 columns to break only at line breaks?

Looks like webkit has implemented column-break-inside, which you can add to the fieldset rule to stop it splitting them across columns

fieldset {
    border: 1px solid #ddd;
    padding: 1.0em;
    -webkit-column-break-inside: avoid;
}

CSS3 Columns Splits Mid-div

As I understand CSS3 columns, this is intended behavior. They are designed to support multi-column, newspaper-like text, where each column flows into the next. I haven't read the spec yet, though, so using them for block layout may be doable.

Edit: I came across this today: controlling wrapping in css3 columns. I admit I haven't tried it, but it sounds like what you're after.

Css3 Columns - Force Non Breaking/Splitting Element