Using CSS to keep paragraphs/blocks together when printing

Posted on 2008-11-18
Last Modified: 2012-05-05
Is there a way to keep a block of text together, either in a DIV tag or as P tag, when you print a page? Example. A quotation page with many items, and at the end there is a disclaimer and signature area that must be together, either on the first page or next page.

Is this possible at all??  I have searched but cannot see anything for this.
Question by:mandymoo
    LVL 42

    Expert Comment

    by:David S.
    Try using the page-break-before property:

    Author Comment

    Unfortunately this doesn't fix the problem.
    Applying this to the #invfooter DIV style, still allows its contents to be split over 2 pages, as I'm wanting either all the info on the same page (if short quote) or the info to be on the next page in full.

    Code sample:
    #invfooter {
          clear: both;
          width: 650px;
          margin-top: 0px;
          margin-right: auto;
          margin-left: auto;
          font-size: 11px;
          line-height: 14px;
          text-align: right;
          page-break-before: auto;

    I have also tried "orphans"... do I have to use them both together?? Again I have tried this above with "orphans: 12".

    Any other suggestions?
    LVL 15

    Assisted Solution

    try page-break-after

    see the examples in on how to use it, and set it to always
    LVL 42

    Accepted Solution

    It seems I should have explained more.

    The property you want is page-break-inside, however, only recent versions of Opera support it, so it won't do you much good. Likewise, only recent versions of Opera are the only browsers to support the orphans and widows properties.

    Thus you're stuck with page-break-before and page-break-after. The default value for each of those properties is "auto", so declaring it doesn't do any good. Because browsers only partially support those properties you're down to two choices: page-break-before:always and page-break-after:always

    Author Comment

    Right, Ok. Thanks Kravimir.

    I was a little discouraged, but I have resolved the issue with a little help from PHP!

    They way I got around it was to have a form on my print page, where I can indicate if I want to break the page or not. After indicating I want to break the page, it passes a value to the URL string of "break=always" to the same page. Then, in my stylesheet, I added the variable to it. The CSS is called in when the page loads and everything works beautifully.

    Code sample:
    #invfooter {
          page-break-before: $_GET['break'];

    So a combination of CSS & PHP allows me to break the page at a certain place if the page is too long for 1 page.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Course: HTML5 for Beginning Beginners

    Are you looking for an efficient introduction to HTML5? Have you tried other HTML5 courses and found them too complex? Do you need just the basics of HTML5 to use with Wordpress or other content management system? If you said yes to any of these questions, this course is for you.

    This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
    CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
    In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
    The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    11 Experts available now in Live!

    Get 1:1 Help Now