CSS Page-Break Not Working in all Browsers

Question

I'm having trouble getting this working in most browsers, except for IE (it even works correctly in IE6) and Opera.

Firefox separates the divs correctly but only prints the first page.

Chrome and Safari only applies the page break to the last div.

How can I get this working across all browsers correctly?

The HTML:

<div id="leftNav">
  <ul>
    <!--links etc-->
  </ul>
</div>
<div id="mainBody">
 <div id="container">
  <div class="pageBreak">
   <!--content-->
  </div>
  <div class="pageBreak">
   <!--content-->
  </div>
  <div class="pageBreak">
   <!--content-->
  </div>
 </div>
</div>

The divs with the IDs #leftNav and #mainBody are are set to float:left, so they display nicely.

I only want to print the .pageBreak classes, hiding the #leftNav and the rest of the #mainBody with CSS.

The CSS:

@media print
{
 #leftNav
 {
  display:none;
 }
 #mainBody
 {
  border:none;
  margin:none;
  padding:none;
 }
}

As far as I know that property should work in all major browsers if you use the "always" value. Could you post your relevant css and html? — AJJ, Feb 03 '11 at 09:40
If you've solved the problem yourself and it doesn't happen to be one of the answers below, it would be a good idea to post it here for posterities sake, instead of appending `[solved]` to your question's title (which doesn't do anything really). Also note that SitePoint reference (which sepehr linked to below) is a much better reference for CSS and HTML [than W3Schools](http://w3fools.com/) — Yi Jiang, Mar 13 '11 at 19:35
This was one of my first posts and force of habit made me change the title as per many forum rules instead of making a new post. I did visit SitePoint regarding this issue but that didn't give me the help I needed. In this case W3Schools did. — Richard Parnaby-King, Mar 15 '11 at 16:13

score 118 · Accepted Answer · edited Nov 17 '19 at 22:32

118

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

edited Nov 17 '19 at 22:32

hdorio

12,902
5
34
34

answered Mar 15 '11 at 16:12

Richard Parnaby-King

14,703
11
69
129

Which browsers have problems with `inline-block`-elements? – Ini Jul 25 '19 at 11:15
1

The last statement of your answer is very important... I had to cut my `` in many parts and set different fixed size on every single columns so the said columns would not adjust to the content and still look great. I now wish to destroy every single printer in the world... Thanks for the clarifications
– Antoine Pelletier Oct 02 '19 at 13:33
17

Also `display: flex;` will break it. At least in my experience in Chrome :) – Gurnzbot Apr 01 '20 at 19:00
As well make sure your element isn't hidden. I had that problem once when I wanted to place page breaks on elements with specific content in it. So I set them to hidden and added a page break on the same element which did not work. – Eldar Omerovic Jan 19 '23 at 11:45

score 34 · Answer 2 · edited Nov 03 '17 at 20:14

34

For the sake of completion, and for the benefit of others who are having the same problem, I just want to add that I also had to add overflow: visible to the body tag in order for FireFox to obey the page breaks and even to print more than just the first page.

edited Nov 03 '17 at 20:14

falsarella

12,217
9
69
115

answered Mar 22 '13 at 17:45

Vincent

1,741
23
35

30

For a bit more completeness, `display:flex` seems to mess things up as well. – Ben Nov 05 '14 at 22:59
@Rajesh did that affect Chrome too for you? Or just Firefox? – Matt Mar 08 '16 at 17:03
1

In Firefox print display:flex messed up, put display:block in print.css – overallduka Apr 02 '16 at 01:15
Sometimes, IE rather requires an `overflow: hidden`to make `break-inside: avoid` work correctly. – BurninLeo Apr 28 '16 at 07:01
3

`@media print{ body{ overflow:visible; } }` fixed my problem, thank you! – Megajin Dec 29 '16 at 10:18
@Ben it works like a charm, in my case, I print apart of HTML. – ThanhLD Aug 06 '19 at 07:44
Adding overflow:visible to my body el helped in Edge as well. – tstrand66 Apr 09 '21 at 20:26

score 24 · Answer 3 · edited May 23 '17 at 12:10

I've found that Twitter Bootstrap classes add a bunch of stuff to the page which has made it difficult to get page-breaks working. Firefox worked right away, but I've had to follow various suggestions to get it to work in Chrome and, finally, IE (11).

I followed the suggestions here and elsewhere. The only property I "discovered" that I haven't seen yet mentioned is "box-sizing". Bootstrap can set this property to "box-sizing: border-box", which broke IE. An IE-friendly setting is "box-sizing: content-box". I was led to this by the caveat about "block elements with borders" made by Richard Parnaby-King https://stackoverflow.com/a/5314590/3397752.

It looks like it's a bit of an arms race to discover the next property that might break page-breaks.

This is the setting that worked for me (Chrome, FF, IE 11). Basically, it tries to override all the problematic settings on all divs on the printed page. Of course, this might also break your formatting, and that would mean that you'll have to find another way to set up the page.

@media print {

    div { float: none !important; position: static !important; display: inline; 
          box-sizing: content-box !important;
    }

}

thank you i add display: inline !important; and margin : 0 !important too — FatemehEbrahimiNik, Mar 04 '21 at 08:48

Sarath Mohan · Answer 4 · 2016-04-28T20:04:29.760

10

There is a solution if the parent has float . For the element to which you applied the page-break, make the element overflow:hidden. Thats all. It worked for me.

<div style='float:left'>

<p style='overflow:hidden;page-break-before:always;'></p>

</div>

edited Apr 28 '16 at 20:04

answered Apr 28 '16 at 18:52

Sarath Mohan

157
1
6

This worked OK, for me using `wkhtmltopdf` I needed to set `html, body { overflow: hidden; }` because a template .css was using `overflow-x:hidden`. This shouldn't be downvoted. Thanks! – Sebastian Oct 20 '16 at 14:44

score 9 · Answer 5 · edited Mar 25 '19 at 16:33

Although this is not prominently documented, it should be noted that the page-break properties cannot be applied to table elements. If you have any elements that have a display: table; or display:table-cell; applied to them (common in many templates under the clearfix class) then contained elements will ignore the page-break rules. Just cancel out the the rule in your print stylesheet and you should be OK (after the floats have also been removed, of course).

Here is an example of how to do this for the popular clearfix problem.

.clearfix:before, .clearfix:after{  
    display: block!important;
}

The other place I have run into this is when the template declared the entire page (usually called main or main wrapper) with display:inline-block;

If the section is inside of an inline-block, it will not work so keep your eyes open for those as well. Changing or overwriting display:inline-block; with display:block should work.

score 8 · Answer 6 · answered Dec 17 '13 at 17:00

8

I had a position: absolute; in the div printing that caused this not to work.

answered Dec 17 '13 at 17:00

ade jones

639
11
15

score 8 · Answer 7 · answered May 31 '20 at 09:22

8

Make sure the parent element has display:block; rather than display: flex;. This helped me fix the issue

answered May 31 '20 at 09:22

Akashxolotl

428
5
6

score 6 · Answer 8 · edited Jun 20 '20 at 09:12

6

"Firefox versions up to and including 3.5 don’t support the avoid, left, or right values." IE support is also partial you can achieve what needed by :page-break-before:always; which is supported in all browsers "but only print the first page" : I don't think it is css related , I suppose it's sth on print window of browser :)

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 03 '11 at 09:55

sepehr

5,479
3
29
33

score 5 · Answer 9 · answered Feb 03 '11 at 09:42

5

what's your code?
like this?:


<style>
@media print
{
table {page-break-after:always}
}
@media print
{
table {page-break-before:always}
}
</style>

answered Feb 03 '11 at 09:42

Mohammad Ali Akbari

10,345
11
44
62

CSS Page-Break Not Working in all Browsers

9 Answers9

Linked