CSS and the page break

[mfeske]

Hello, I have a problem with the integration of CSS and the page break. I'm pretty sure that the application used to work (2 years ago).
Now the pagination is not working correctly and the CSS is not applied.
css

body {
    color: darkred;
    font-family: arial, sans-serif;
    width: 40em;
}
.page-break {
    page-break-after: always;
}
.box0 {
    background-color: white;
    color: black;
    font-size: 8px;
    text-decoration: underline;
    position: absolute;
    top: 45mm;
    left: 20mm;
    width: 85mm;
    height: 2.0mm;
    border: 0px solid black;
}
.box1 {
    background-color: white;
    color: grey;
    font-size: 8px;
    position: absolute;
    top: 48mm;
    left: 20mm;
    width: 85mm;
    height: 14.7mm;
    border: 0px solid black;
}
.box2 {
    font-size: 12px;
    background-color: white;
    color: black;
    position: absolute;
    top: 52.7mm;
    left: 20mm;
    width: 85mm;
    height: 27.3mm;
    border: 0px solid black;
}
.date {
    color: red;
    background-color: white;
    font-size: 12px;
    text-align: right;
    position:absolute; top:88.46mm; right:20mm;
}
.subject {
    color: black;
    font-size: 14px;
    font-weight: 3em;
    /* für DIN 5008 Form B
      position:absolute; top:98.46mm; left:25mm;
    */
    position:absolute; top:98.46mm; left:25mm;
}
.contentfirst {
    color: black;
    font-size: 14px;
    /* für DIN 5008 Form B
      position:absolute; top:108.46mm; left:25mm;
    */
    position:absolute; top:108.46mm; left:25mm;
    width: 165mm;
}
.contentnext {
    color: black;
    font-size: 14px;
    /* für DIN 5008 Form B
      position:absolute; top:108.46mm; left:25mm;
    */
    position:absolute; top:45mm; left:25mm;
    width: 165mm;
}
.footer1 {
    color: black;
    font-size: 8px;
    text-align: center;
    /* für DIN 5008 Form B
     position:absolute; top:280mm; left:25mm;
    */
    position:absolute; top:270mm; left:25mm;
}
.footer2 {
    color: black;
    font-size: 8px;
    text-align: center;
    position:absolute; top:270mm; left:66mm;
}
.footer3 {
    color: black;
    font-size: 8px;
    text-align: center;
    position:absolute; top:270mm; left:107mm;
}
.footer4 {
    color: black;
    font-size: 8px;
    text-align: center;
    position:absolute; top:270mm; left:148mm;
}

the text
....

        <div class='box0'>[absender]</div>
        <div class='box1'>[zusatz]</div>
        <div class='box2'>[vorname] [nachname]
                          [street] [streetno]
                          [zip] [city]
                          [country]</div>
        <div class='date'>Berlin [datum]</div>
        <div class='subject'>Betreff </div>
<div class='contentfirst'>
[anrede01] [nachname], [anrede02],

........

</div>
[footer]
<div class="page-break"></div>
<div class='contentnext'>

....

[bsweeney]

What is happening, or not happening, What you've provided seems to work OK so you might need to provide a more complete sample document.

[mfeske]

Hi bsweeney , thanks for the quick reply and sorry for the incomplete question. A mail merge is being created, I have now narrowed this down to one letter. The PDF document is also created, but obviously the CSS is not taken into account in the address area and in the footer; this should display the four addresses next to each other. If I use file_put_contents('text.html', $text); an html file is created, which I think works correctly except for the page break https://freiescholle.info/vertreter/text.html but this does not work in the PDF.

serialletter (8).pdf

[hussain-hadii]

Hi mfeske , can you get the solution?

[bsweeney]

Looking at this I see one potential issue in that the content of the letter is positioned absolutely, so page breaks don't apply to that content. The page is broken where you have styled it as such, and so the two content block do appear on separate pages.

As for the addresses, I do see them next to each other if I set the page size large enough to accommodate the dimensions that were set. It could be that you just need to tweak the dimensions a bit.

I believe you could achieve the layout a bit more easily by avoiding positioned elements, but I don't know what you're trying to achieve ultimately.