Break Page after 6 div using page-break-after?

Question

Here is what my print page look like,

enter image description here

Here is my html glimpse,

<style>
    .container{
        float: left; 
        border: 1px solid Black; 
        width: 400px;
        height: 350px;
        margin: 10px;
        padding: 10px;
        page-break-inside: avoid;
    }
    .container img{
        max-width: 200px;
        max-height: 200px;
    }
</style>
<div class="container">
    <b>Name: </b>@Product.Name<br />
    <b>Model: </b>@Product.ModelNumber<br />
    <img src="@Product.ImagePath" /><br />
    <span style="font-size: 20px">DetailedDescriptions</span><br />
    @foreach(var attr in Product.DetailedDescriptions){
        @attr.Header<br />
    }
    <span style="font-size: 20px">KeyAttributes</span><br />
    @foreach(var attr in Product.KeyAttributes){
        @attr.Name<br />
        @attr.Value<br />
    }
</div>

How to make sure that the page break after every 6 divs using css

score 4 · Answer 1 · answered Jul 17 '13 at 12:17

You should encapsulate your divs and create a better structure of this type in HTML:

<body>
    <div class="container-holder">
        <div class="container-row">
            <div class="container"></div>
            <div class="container"></div>
        </div>
        <div class="container-row">
            <div class="container"></div>
            <div class="container"></div>
        </div>
        <div class="container-row">
            <div class="container"></div>
            <div class="container"></div>
        </div>
    </div>
    <div class="container-holder">
        <div class="container-row">
            <div class="container"></div>
            <div class="container"></div>
        </div>
        <!-- keep adding more container-rows -->
    </div>
</body>

Then in CSS take several things into account:

let body take up whole page
use page-break-inside: avoid;
give specific width and height in pixels to divs
containers should have the display: inline-block and vertical-align: bottom;
container-holders should have display:block property
[bonus] avoid inline style

Here is a working jsFiddle

I have tried it outside of jsFiddle and I get this result:

print preview

if this works for you, please mark this response as *answered* — achudars, Jul 17 '13 at 12:18

score 3 · Answer 2 · answered Jul 17 '13 at 11:41

3

You can use

div:nth-of-type(6n) {
    page-break-after:always;
}

to insert a page-break after each 6. div, but I think this will not work with floats.

answered Jul 17 '13 at 11:41

Roland Jansen

2,733
1
16
21

score 1 · Accepted Answer · answered Jul 17 '13 at 11:40

1

You could do it this way:

FIDDLE

.wrapper div:nth-child(6n)
{
    margin-bottom: 300px;
}

Which means: after every 6 containers - add a bottom margin of x px (how ever much you need) so that it pushes the next boxes to the next page.

answered Jul 17 '13 at 11:40

Danield

121,619
37
226
255

This look nice. But I prefer page-break-XXX. So that it work with any dimension. – Imran Qadir Baksh - Baloch Jul 17 '13 at 11:49
In your question your containers are of a fixed height - so this should work for you :) – Danield Jul 17 '13 at 12:04
Removing float is working but I need to float element to left so that I can place as many element in row as possible. Is there is way? – Imran Qadir Baksh - Baloch Jul 18 '13 at 09:22
try display: inline-block instead of float – Danield Jul 18 '13 at 09:23
try vertical-align:middle ... not sure though... otherwise i'll need a fiddle from you – Danield Jul 18 '13 at 09:46
Now it's fine. But curious that how vertical-align:middle make the height same. Thanks – Imran Qadir Baksh - Baloch Jul 18 '13 at 10:08

Break Page after 6 div using page-break-after?

3 Answers3