Content not aligning properly with multi page, two column layout

MDWCG

unread,

Feb 17, 2014, 3:03:47 PM2/17/14

to dom...@googlegroups.com

Hello,

I'm using dompdf 0.6.0 and I have a PDF template created which defines a two column layout (left and right). The content in the left column is the "meat" of the page, where as the content in the right column is more like "quick bits" type of stuff. If the generated PDF only has enough content for one page, everything appears exactly as it should. However, if the generated PDF requires more than one page...the content of the right column does not show up until the last page of the generated PDF. This leaves the right column completely blank on page 1 and so on. I want the content of the right column to always appear on page 1, regardless of how many pages it is. Anyone know why this might be happening?

I am using CSS to define the layout with <div> tags, but I am not using the 'float' property. Instead I am using the 'display: inline-block' property, and this seems to be working for me....for the most part. I would like to keep using CSS to define the layout if possible, and not have to switch to tables.

Thanks!

BrianS

unread,

Feb 17, 2014, 6:01:26 PM2/17/14

to dom...@googlegroups.com

This is happening because of the way dompdf renders a document. It starts at the top and moves through the document, rendering each element as it is encountered. If an element being rendered reaches the end of a page a new page is created. Any following elements will be rendered starting with that page.

As for a fix, I don't have any suggestions yet. It's a difficult issue to work around because of the way documents are rendered.

Message has been deleted

MDWCG

unread,

Feb 18, 2014, 11:44:12 AM2/18/14

to dom...@googlegroups.com

Thank you very much for your response.

At this point, is there any "best method" way to make a two column layout work properly with dompdf? I do not necessarily have to have the content that is currently in my right column appear on the right - it could appear on the left instead. I am flexible with that. Should I revert to tables (ugh)? Any other suggestions would be greatly appreciated. Thanks!

BrianS

unread,

Feb 18, 2014, 11:41:46 PM2/18/14

to dom...@googlegroups.com

The best way to handle it with dompdf right now is to use a float on the "quick bits" to push it to the side. If you want that section to fill the page you can set it's height. Something like:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<div id="quick-bits" style="float: right; width: 30%;">...</div>
<div id="meat">...</div>
</body>
</html>

But this only works if the floated portion doesn't cross the page boundary. Because of the way dompdf parses documents it's a difficult limitation to overcome.

John Bell

unread,

Feb 20, 2014, 8:23:14 AM2/20/14

to dom...@googlegroups.com

Could you break the left and right columns into more 'bite size'
chunks? Similar to: http://tuljo.com/web-development/aligning-divs-css

John

> --
> You received this message because you are subscribed to the Google
> Groups "dompdf" group.
> To unsubscribe from this group and stop receiving emails from it,
> send an email to dompdf+un...@googlegroups.com.
> To post to this group, send email to dom...@googlegroups.com.
> Visit this group at http://groups.google.com/group/dompdf.
> For more options, visit https://groups.google.com/groups/opt_out.
>

Reply all

Reply to author

Forward