How to prevent column break within an element?

html

responsive-design

css-tricks

web-development

byAlex Kataev·Feb 19, 2025

Use the CSS break-inside: avoid-column rule to stop an element from splitting and falling into different columns.

.element {
  break-inside: avoid-column; /* "We don't do that splitting here." */
}

Apply it to your HTML element:

<div class="element">"My content remains united!"</div>

Please note that break-inside won't play its magic trick on inline elements.

Cross-browser compatibility strategies

Applying break-inside isn't a straight path. Here are tricks to get it working on different browsers:

Chrome, Safari, IE 11: These browsers can break your heart but not your content. Use break-inside: avoid-column with display: table.
Firefox: It seems reluctant to the break-inside charm, but page-break-inside: avoid is a decent alternative.
Wrap in a table: This trick ensures that content in Firefox remains together. And it rocks!🎸
Vendor prefixes: Adding -webkit-column-break-inside: avoid sometimes saves the day especially for the older browsers.
Fallbacks: Your CSS should have a plan B for browsers that can't handle break-inside.

Don't forget to check caniuse.com for the browser compatibility of CSS features.

Handling common issues like a pro 👨‍💻

Anticipate these problems when dealing with column breaks:

Bullets playing hide and seek

When your list bullets decide to take a vacation due to overflow: hidden or display: inline-block, bring them back using ::before **pseudo-elements**.

Applying styles to complex structures

For nested elements or complex structures, apply style rules to child elements or wrap items in individual div. An alternative way to ride this wave is by using display: flex;.

Adaptable designs

From mobile screens to widescreen monitors, your CSS should rock on any stage. Keep your designs flexible and responsive.

Leveling up your CSS game 🚀

Use these advanced techniques to deal with column breaks:

Fake it, till you make it

Design column-like structures using box shadows and pseudo-elements. This method creates an appearance of column breaks without splitting the content.

Flexboxes – The modern warriors

The flex or grid display properties can help you maintain the flow of the content while giving a perception of multi-columns. They are an enhanced alternative for dealing with column breaks.