Page-Break-Before:Auto Not Working for Me....Why

page-break-before:auto not working for me....why?

I managed to get this working by applying

page-break-after:always;page-break-before:always;

However... i feel mVChr's solution would work also for other, but not in my case.

Many thanks

CSS Page-Break Not Working in all Browsers

Parent elements can not have float on them.

Setting float:none on all parent elements makes page-break-before:always work correctly.

Other things that can break page-break are:

using page-break inside tables
floating elements
inline-block elements
block elements with borders

CSS page-break-before not working on table row

If you are using print media queries, it's best to add !important to the styles specified within the print media query (it's one of the few times when adding !important is advocated!)

Try:

@media print {
        tr.page-break {
            page-break-before:always!important;
        }
 }

and see how you go.. Hope this helps

EDIT:

Adjust your CSS to include the following:

 @media print {
  table.report { page-break-after:auto }
  table.report tr    { page-break-inside:avoid; page-break-after:auto }
  table.report td    { page-break-inside:avoid; page-break-after:auto }
  table.report thead { display:table-header-group }
  table.report tfoot { display:table-footer-group }
 }

Source Thank you Majid!

Phew!

page-break-after does not work in Chrome

It is a hack, but Chrome doesn't support page-breaks very well. So try to use this instead:

<body>
    <main role="main">
        <section class="tabs">
            <div class="tabbed-content">
                <div class="break-after">Page 1</div>
                <div class="break-before">Page 2</div>
            </div>
        </section>
    </main>
</body>

And add this to your css:

html, body, .main, .tabs, .tabbed-content { float: none; }

.break-after {
    display: block;
    page-break-after: always;
    position: relative;
}

.break-before {
    display: block;
    page-break-before: always;
    position: relative;
}

`page-break-after: avoid` when break occurs in margin

First (simple and safe) solution:
Add a section/div element around h1 and first paragraph and set on it a page-break-inside: avoid. In example:

    <body>
       <div class="headline">
          <h1>A sample title</h1>
          <p>First paragraph bla bla blac....</p>
       </div>
       <p>Second paragraph...</p>
    </body>

with CSS:

    .headline {
        page-break-inside: avoid;
    }

Second solution: with some little change on html, and semantic section can do something like:

  <body>
    <div class="page">
      <section>
        <h1>
          A Simple Title
        </h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </p>
        ...
        <h1>Second title</h1>
        <p>Lorem....</p>
    </section>
  </body>

With CSS:

body {
  font: sans-serif;
}
.page {
  padding: 1em;
}
section {
  page-break-before: always;
}
section > p + h1 {
  page-break-before: always;
  page-break-after: avoid;
}
section > h1* + p {
  page-break-before: avoid;
}

You can see an example here: https://codesandbox.io/s/test-print-avoid-page-break-after-title-l4kbq

Page-Break-Before:Auto Not Working for Me....Why