ansaurus

Question

CSS page-break-after and float not playing nicely?

Answer 1

+1 A:

It is the floats that are messing it up for printing.

Do you need the floats there for printing? or are floats only needed for the web?

Why I am asking is you can have different CSS classes for different medias (print, screen) http://www.w3.org/TR/CSS2/media.html

So your float can be on the screen media - which will show only for web. While you will want your page break only to show for print media.

Here is an example using the media: (note when referencing CSS you can choose media via an attribute )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>Test</title>
    <style>
        @media print {
       .myDiv { page-break-after: always; }
      }
      @media screen {
        .myDiv {float:left;}
      }
    </style>
    </head>
  <body>
    <div class="myDiv">hello</div>
    <div class="myDiv">there</div>
    <div class="myDiv">bilbo</div>
    <div class="myDiv">baggins</div>
    </body>
  </html>

Update:

Will this work for what you need? GIves you a 3x3 on each page when printing out. But on the screen it's a 3x6. Quick sample.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>Test</title>
    <style>    
        .break
        {
                   page-break-after: right; 
                   width:700px;
                   clear:both;
        }
        .myDiv {    
        float:left;
        width:200px;
        height:100px;
        background-color:blue;
        margin:5px;
        }
      }
    </style>
    </head>
  <body>
    <div class="break">
        <div class="myDiv">1</div>
        <div class="myDiv">2</div>
        <div class="myDiv">3</div>  


        <div class="myDiv">4</div>
        <div class="myDiv">5</div>
        <div class="myDiv">6</div>  


        <div class="myDiv">7</div>
        <div class="myDiv">8</div>
        <div class="myDiv">9</div>  
    </div>

    <div class="break">
        <div class="myDiv">11</div>
        <div class="myDiv">22</div>
        <div class="myDiv">33</div> 


        <div class="myDiv">44</div>
        <div class="myDiv">55</div>
        <div class="myDiv">66</div> 


        <div class="myDiv">77</div>
        <div class="myDiv">88</div>
        <div class="myDiv">99</div> 
    </div>
    </body>
  </html>

Ryan Ternier 2010-10-07 22:34:25

Unfortunately the floats are needed for printing - I want each div to be printed side by side, and then break after the 9th (since they're in a 3x3 grid on the page). Is there anything I can do to get round the bad float/page break interaction?

Colen 2010-10-07 22:41:31

I spent a bit yesterday trying to figure out how to get that done in IE (7-9beta). IT seems whenever that float is on that element it will do that. I did have a bit of luck putting the page-break-after on other elements surrounding the floats and inside the floats, but the outcome wasn't always "stellar".

Ryan Ternier 2010-10-08 16:08:42

Updated the answer. This one will work in IE. just surround your 3x3's with a div that has the page-break-after.

Ryan Ternier 2010-10-08 17:20:48

ansaurus

tags:

views:

answers:

CSS page-break-after and float not playing nicely?

related questions