title: Alternative for page-break-inside: avoid
body: <p>I have a page which generates coupons. Each coupon is a <code>div</code> with a height varying depending on the content. I want to print as many coupons on each page as possible, but I do not want the coupons to be split out over several pages. The CSS property <code>page-break-inside</code> does exactly what I need. However, I need this to work for Firefox and/or Chrome. And <a href="http://www.webdevout.net/browser-support-css?IE7=on&amp;IE8=on&amp;FX3=on&amp;OP8=on&amp;OP9=on&amp;SF2=on&amp;uas=CUSTOM#support-css2propsprint-pagebreakinside" rel="nofollow noreferrer">this is not supported</a>. <a href="https://stackoverflow.com/questions/1246636/alternative-to-page-break-insideavoid-because-of-compatibility-issues">Two years</a> and <a href="https://stackoverflow.com/questions/2045470/page-break-inside-avoid">one year ago</a> the same question was asked, and there was no good alternative for this. We are a lot of CSS3/HTML5/overall browser development further... is there an alternative to get this working?</p>
  
  <p>Example is here: 
  <a href="http://jsfiddle.net/e3U66/2/" rel="nofollow noreferrer">http://jsfiddle.net/e3U66/2/</a></p>
  
  <p>Assume that a page, when printed, measures 1000px. I want the second DIV to appear on the second page, because otherwise it is split out over the first and second. This code works in Opera, but not in FF or Chrome. </p>