1

I'm trying to avoid a page break about 200px after an h2 element. I know I can use the page-break-after: avoid but I doubt it covers 200px and doesn't seem to work in chrome, which is my browser of choice.

My approach is to set the width of the content to 98% and create a column next to it that's set to a height of 200px, a width of 1% and has the page-break-inside: avoid property.

.main {
  display: inline-block;
  width: 98%;
}

.page-break-indicator {
  display: inline-block;
  vertical-align: top;
  width: 1%;
  page-break-inside: avoid;
  height: 200px;
}
<div class="main">
  <h2>My Header</h2>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, cum nobis nemo voluptatem voluptatum harum odio quo expedita, aliquid natus vitae provident ut in consequuntur, ad quam corrupti? Nam voluptas, non adipisci, aliquid autem sint hic vel dolorum maiores dolore corporis optio quam commodi reprehenderit, cum accusamus explicabo pariatur magnam dolorem. Quos, modi suscipit, facere beatae harum porro rem, odio sunt eaque perferendis minus cupiditate amet reprehenderit in eligendi. Ratione vel corrupti dolores assumenda doloremque ab harum libero nobis dolorum fugiat, optio, alias similique? Exercitationem odit dolores nisi consequatur aut eveniet modi ullam quasi dolor maiores? Odit nemo ipsam aliquam!</div>
</div>
<div class="page-break-indicator"></div>

I repeat this code several times to roll over to a new page but I'm getting an unexpected problem. If the content in div.main rolls over to a new page, all of the content goes to the next page. It's like the display: inline-block also sets the page-break-inside: avoid; for div.main. Any idea what I'm doing wrong here? Or is there a better approach I'm overlooking?

Johnny Metz
  • 5,977
  • 18
  • 82
  • 146
  • In my browser, making the main block inline-block causes it to not break (i.e. roll over) even if there is no page-break-indicator div present. – Mr Lister Dec 16 '18 at 09:47
  • @MrLister are you using chrome? – Johnny Metz Dec 17 '18 at 23:24
  • Sometimes. Usually Mozilla, but also Edge and IE11 when I'm testing. And it works as I said: using `display:inline-block` for `.main` causes it to not break inside, even in he absence of any `page-break...` properties. So it's not the `.page-break-indicator` that is the problem in your case, but `.main` itself. – Mr Lister Dec 18 '18 at 07:41

0 Answers0