CODEWITHSUNDEEP
css
Jerry
Jerry

Reputation: 4547

How do I emulate a page break with CSS and HTML?

I'm trying to generate a CSS class that will help me define a "page break".

I know that if I use @media:print .MyDiv{ width:100%; height:100%; }, I can then set the class of a div to MyDiv and it will be -- as best as possible -- 1 page of print.

This is great, but I have encountered a new item that I don't know how to handle, and I'm hoping that something similar can be done. I need to create an empty div that will stretch itself out to the "end of the page".

Something like:

<style type="text/css">
@media print .PageBreak { 
    width: 100%; 
    height: *; /* space left on current page */ 
}
@media screen .PageBreak {
    border-bottom: 1px solid black;
}
</style>

<!-- ... -->

<div>This should appear on the first page.</div>

<div class="PageBreak"><!--
    This DIV should stretch itself out so that the next piece
    of content appears on the next page (only when printing).
--></div>

<div>This should appear on the second page.</div>

Upvotes: 6

Views: 5819

Answers (4)

Mark Biek
Mark Biek

Reputation: 150739

This is for print, right?

Can't you just use this?

<p style="page-break-before: always"></p>

There are some other options to page-break-before that are worth knowing about too.

Upvotes: 15

Jerry
Jerry

Reputation: 4547

In case anyone is interested in the solution I used:

<style type="text/css">
@media print {
    .PageBreak {
        page-break-before: always;
    }
}
@media screen { 
    .PageBreak { 
        border-bottom: 1px dashed black; 
        width: 100%;
        margin-bottom: 12px; 
    }
}
</style>

So simple. Thanks Mark and Mark.

Upvotes: 3

user1271519
user1271519

Reputation: 439

If your html goes as attachement and if the user is previewing the file using gmail, gmail removes any css rule that has a page-break-after property rule.

Upvotes: 0

Mark Davidson
Mark Davidson

Reputation: 5513

Sorry if I am missing something but is there a reason you can't use the default page breaking in css.

Specifying page breaks for printing using CSS

Upvotes: 1

Related Questions