Printing HTML div and page break issue when using float / position styles
12:38 23 Apr 2020

See this class:

.divDutySlip {
    width: 90mm;
    min-height: 120mm; 
    padding: 2mm;
    /*float:left;
    position: relative; */
    margin: 2mm;
    border: 1px solid #000000;
    page-break-inside: avoid;

}

I have commented out two styles. Commenting them out causing the content to page-break correct. No "Duty Slip" is split across a page:

Preview

Now, if I introduce the float and position styles and try again the page break logic fails. If I try to print landscape then I get slips side by side but they still split on page breaks. This example is with a lot more content and I have blocked out the names:

Preview

So how can I fill the page with these slips and prevent splitting over page breaks? At the moment the only way I can do it is by commenting out those styles and limiting to one column of duty slips.

CSS:

body {
    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
    font-size: 12pt;
    text-align: left;
    color: #000000;
    background-color: #ffffff;
}
.divDutySlip {
    width: 90mm;
    min-height: 120mm; 
    padding: 2mm;
    /*float:left;
    position: relative; */
    margin: 2mm;
    border: 1px solid #000000;
    page-break-inside: avoid;

}
.textTitle {
    font-size: 14pt;
    font-weight: 700;
}
.textName {
    font-size: 12pt;
}
.tableDutySlip {
    width: 100%;
    border:1px black solid;
    border-collapse:collapse;
}
.tableDutySlip td {
    border:1px black solid;
}
.cellHeading {
    font-weight: 700;
    background-color: #808080;
}
.cellDate {
    
}
.cellAssignments {
    
}
.columnDate {
    width: 25%; 
}
.columnAssignments {
    width: 75%;
}

@media screen
{
    br { display: none; }
}

HTML:








Assignment Duties




Assignment Duties

Test1

Date Assignments
Thu, Apr 9 Mic Left, Mic Right
Sun, Apr 12 Watchtower Reader
Thu, Apr 16 Mic Left, Mic Right

Assignment Duties

Test2

Date Assignments
Sun, Apr 12 Mic Left, Mic Right
Sun, Apr 19 Mic Left, Mic Right

Assignment Duties

test3

Date Assignments
Sun, Apr 19 Watchtower Reader

Fiddle:

https://jsfiddle.net/e3kradLh/

html css page-break-inside