Avoid page break within a DIV

[elainebyrne]

I have a design where there's a long DIV and that breaks the PDF when generated. The content goes to the next page and renders the first page blank!

The PDF is attached to see how it looks after it's generated.

This is the CSS:

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body { 
  margin: 0; font-size: 13px;
}
td div, th div, div, .vessel, .column-1, .column-2, .column-3, .column-4, .column-5, .column-6, .column-7, .column-8, .column-9, .column-10, .column-11, .column-12, .series {
  page-break-inside: avoid !important;
}
.vessel {
  margin-right: auto;
  margin-left: auto;
}
.series {
  margin-left: -15px;
  margin-right: -15px;
  clear: both;
}
[class*="column-"] {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  float: left;
}
.column-1 {width: 8.33%;}
.column-2 {width: 16.66%;}
.column-3 {width: 25%;}
.column-4 {width: 33.33%;}
.column-5 {width: 41.66%;}
.column-6 {width: 50.00%;}
.column-7 {width: 58.33%;}
.column-8 {width: 66.66%;}
.column-9 {width: 75%;}
.column-10 {width: 83.33%;}
.column-11 {width: 91.66%;}
.column-12 {width: 100%;}

HTML:

<div class="vessel">
    <div class="series">
      <div class="column-8">
        John Baptist
      </div>
      <div class="column-4">
        <img src="images/profile.png" class="profile__pic">
      </div>
    </div>
    <div class="series">
      <div class="column-7">
        Text here which is on repeat-mode.
        Text here which is on repeat-mode.
        Text here which is on repeat-mode.
        ....more text here
      </div>
      <div class="column-5">
        hello world
      </div>
    </div>
  </div>

What do you think I'm going wrong? I'm getting this output where the content goes to the next page:
resume_test (1).pdf

[Tontyna]

Nothing wrong with your html/css, its a bug in WeasyPrint.

It's probably another #36

[elainebyrne]

Any idea how to overcome this issue? I can re-write the entire html/css. I really need this design done one way or another.

[liZe]

Yes, it's a duplicate of #36.

WeasyPrint doesn't handle parallel flows yet, it means that you can't have automatic breaks of more than one text between two pages.

Any idea how to overcome this issue? I can re-write the entire html/css. I really need this design done one way or another.

Could you provide a full (not truncated) HTML + CSS sample with a short explanation of what you want? We'll then be able to tell you if there's a solution.

[elainebyrne]

printexample.pdf

I think it would be easier to show the sample PDF I'm planning to achieve. I don't mind using tables or div floats as long as it works.

Note how the contents of the first page goes to the next page.

[liZe]

That's unfortunately a perfect example of what you can't do with WeasyPrint (yet).

I'm sorry. I hope that I'll find the time to implement fragmentation in the next months, it's a must have.

I now close this issue as it's definitely a duplicate of #36.

[Tontyna]

It's a pity that @hughsw gave up on #36 ... and nobody knows why. Probably and understandably because of the spec's annoying prose...