CSS3 Columns - Force non breaking/splitting element?

Question

I'm using some CSS3 columns (column-count: 2;column-gap: 20px;) to split some content into two columns. In my content I have a <p>, followed by a <blockquote>, followed by another <p>.

My question: Is there a way of preventing my <blockquote> (or any other specified element) from splitting into two columns?

For example, currently my <blockquote> is partially in column 1, and partially in column 2.

Blockquote split onto multiple columns

Ideally I'd like to make it so the <blockquote> stays together in either column 1 or 2.

Blockquote maintained in column

Any idea if this can be achieved?

Thanks!

score 118 · Accepted Answer · answered Dec 14 '11 at 15:31

118

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

answered Dec 14 '11 at 15:31

bookcasey

39,223
13
77
94

This is a very helpful tip. Thank you. But unfortunately this doesn't work with the jQuery Columns Plugin. Maybe you know a workaround for this by chance, too? Would be very interesting: http://welcome.totheinter.net/columnizer-jquery-plugin/ – Melros Apr 13 '12 at 00:12
3

also doesn't work if you're columns are made up of long list elements – fbstj Mar 28 '13 at 17:29
2

Also, you need to remove any floats you have on the element, or it will split even with `display:inline-block` – inorganik May 06 '13 at 17:42
FYI, this solution **doesn't work if you're using order lists**. When you apply `display:inline-block;` it hides the list item (numbers for example). – Ricardo Zea Jul 23 '13 at 16:58
Thank you, but this does not work with Opera. I know, Opera is not a very popular browser, but still... – Simon Ferndriger Mar 25 '14 at 12:45
This is a great tip! Thank you very much! – Marco Sep 12 '16 at 13:06

score 51 · Answer 2 · edited Jul 02 '13 at 00:35

51

In theory the property you are looking for is...

blockquote {
  column-break-inside : avoid;
}

However, last time I checked it wasn't properly implemented in Webkit, no idea about firefox. I've had more luck with:

blockquote {
  display: inline-block;
}

As the renderer treats it as an image and doesn't break it among columns.

edited Jul 02 '13 at 00:35

Adrift

58,167
12
92
90

answered Dec 14 '11 at 15:36

methodofaction

70,885
21
151
164

5

Works in webkit with -webkit- prefix. – hakunin Jan 10 '13 at 20:38
2

Nowadays just use `break-inside: avoid;` – maxime schoeni Feb 07 '23 at 16:43

Tzach · Answer 3 · 2015-08-03T09:14:32.720

9

According to MDN, the correct solution is

blockquote {
  break-inside: avoid-column;
}

However this is not yet implemented in all browsers, so a practical solution is:

blockquote {
  display: inline-block;
}

edited Aug 03 '15 at 09:14

answered Feb 02 '15 at 16:42

Tzach

12,889
11
68
115

score 7 · Answer 4 · answered Aug 09 '13 at 03:16

Just general FYI for others that bump into this forum and need a solution for Firefox.

At the moment writing this, Firefox 22.0 didn't support column-break-inside property even with -moz- prefix.

But the solution is quite simple: Just use display:table;. You can also do **display:inline-block; The problem with these solutions is that the list items will lose their list style item or bullet icon.

**Also, one problem I've experienced with display:inline-block; is that if the text in two consecutive list items is very short, the bottom item will wrap itself up and inline with the one above it.

display:table; is the least worst of both solutions.

More info here: http://trentwalton.com/2012/02/13/css-column-breaks/

CSS3 Columns - Force non breaking/splitting element?

4 Answers4

Linked