Better Page Breaks in Wicked_PDF for Rails

Question

I was able to use the technique described here to get page breaks at certain points I wanted. However, I have a two column layout as follows:

    <div class='book-main-image'><img src="<%= page[:image] %>" /></div>

    <div class='book-headline-holder'>
      <h1><%= page[:title] %></h1>
    </div>

    <div class='book-sidebar book-main-section'>
      <div class='book-sidebar-section'>
        <h4>Location</h4>
        <div class='sidebar-text'><%= page[:location] %></div>

        <h4>Client</h4>
        <div class='sidebar-text'><%= page[:client] %></div>
      </div>
    </div>

    <div class='book-main-content book-main-section'>
      <div class='book-body'><%= page[:body].html_safe %></div>
    </div>

Which is styled like this:

  .book-main-section    { display: inline-block; vertical-align: top; }
  .book-sidebar         { width: 20%; margin-left: 3%; margin-top: 10px; }
  .book-main-content    { width: 70%; margin-left: 2%; }

This is fine most of the time, but if the book-body div + the height of book-main-image and book-headline-holder are longer than one page, both book-main-section divs are shifted to the next page, leaving an image and headline on one page with a huge gap and the rest of the content on the next page.

I tried to start introducing some javascript (using an external link to jQuery in the page) to break up the page content into separate divs based on the height of them, but I could never get the Javascript to execute (seems to totally ignore it). Is there any other way to avoid this, or to get the javascript working?

Answer 1

I figured out that the way to get it fixed was remove the monolithic div holding the page[:body].html_safe . That data contained paragraph tags, so I instead styled them and removed <div class='book-body'> and <div class='book-main-content book-main-section'> , and styled the paragraphs like so:

p { float:right; width: 70%; margin-left: 2%; margin-right: 35px; }