Comments on: break-inside

By: Vinod Dangudubiyyapu

Vinod Dangudubiyyapu — Mon, 13 Jul 2020 13:21:43 +0000

Hi I am here to get a solution or advice of the Safari browser issue that cause duplicating the elements above to css column span element
http://www.graphicguru.in/csscolumns.html
I reported to webkit team no response yet, seeking a help here
https://bugs.webkit.org/show_bug.cgi?id=214219

By: Jc

Jc — Tue, 02 Jun 2020 15:21:31 +0000

To all that is still looking for a fix for:

CSS Columns breaking in Firefox/IE11.
Breaking when column-item is less no. of columns

try also:
overflow: hidden;

on the items inside the column.
hope it helps. it worked for me!

By: John

John — Mon, 01 Jun 2020 04:23:44 +0000

In reply to le hollandais volant. Thank you. I agree that CSS columns has issue when items are less than the column-rows we specify. it breaks on FF and IE.

By: John

John — Sun, 31 May 2020 19:39:45 +0000

display: inline-block helped me with my firefox breaking issues. thank you

2020

By: Arijit Chowdhury

Arijit Chowdhury — Tue, 03 Mar 2020 07:04:16 +0000

webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;

This didn't prevent from splitting child element. Only display: inline-block worked

By: Izzy

Izzy — Wed, 31 Oct 2018 21:25:12 +0000

In reply to Heidi. Finally resolved it by adding display: inline-block; to the element we're avoiding break-inside. Hope that helps.

By: Heidi

Heidi — Tue, 18 Sep 2018 03:06:38 +0000

Hi, I’ve come across an issue with columns in IE11 when I use “break-inside: avoid”, I get this random space at the bottom of the parent div that I can only get rid of if I don’t use “break-inside: avoid”, but then I get the children div breaking and overflowing onto the next column.

I’ve replicated a simplified example on Codepen: codepen.io/hcone5006/debug/bxmmpM/ in IE11.

Has anyone come up with this issue?

By: David Millar

David Millar — Thu, 29 Mar 2018 16:02:45 +0000

In reply to Jon.

Are you setting the columns with a column count of 2 or with column widths of 50%? Perhaps a column width of 50% would cause the Acrobat converter to treat the second page as new columns instead of continuation of the first page’s columns.

Alternately, if you’re not locked into Acrobat, perhaps you could use Chrome’s built-in export feature? e.g.

chrome –headless –print-to-pdf=”d:\{{path and file name}}.pdf” https://google.com

By: Maria Asghar

Maria Asghar — Mon, 05 Mar 2018 14:31:19 +0000

In reply to le hollandais volant. Just Saved me ...Thanks a lot

By: Jon

Jon — Fri, 28 Jul 2017 16:27:23 +0000

Very informative. I have a problem where I have paged media with two columns on consecutive pages, but instead of wrapping the text from pg 1 left col to pg 1 right col and then going on to pg 2 left col, it goes from pg 1 left col to pg 2 left col and then back to pg 1 right col. Any idea how I can fix this? When using print preview in Chrome it displays correctly, but I need to use Acrobat to convert HTML to PDF and in that case it leads to this problem…

By: Sagar

Sagar — Mon, 26 Dec 2016 07:37:29 +0000

<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>

By: John Skowronski

John Skowronski — Sat, 24 Dec 2016 03:03:24 +0000

In reply to Jose. I think I have found the missing piece of the puzzle: When I got rid of the margin-bottom on the , the top edge alignment problem went away.

By: Kade

Kade — Sat, 26 Nov 2016 04:02:07 +0000

Very helpful, thank you!

By: Jose

Jose — Thu, 25 Aug 2016 08:55:20 +0000

Thanks for the article! It’s perfect… almost. In the codepen example, I see that the columns are all not flush with the top edge of their container. As I resize the window, one or two sometimes has padding at the top, and sometimes it doesn’t.

Any idea on how to address this inconsistency? I’ve been researching my buns off here, but am turning up no solutions. :(

Thanks!

By: Filipe

Filipe — Thu, 28 Jul 2016 21:22:48 +0000

In reply to le hollandais volant. Thank you so much. Saved me