I'm building a report which requires me to display some content in three columns. The report will be visible to users both as HTML and PDF. I've created a mockup which displays fine in HTML, but the PDF doesn't properly render the columns. I've attached a very simply HTML file (with styles) and the resulting PDF which exhibits the problem I'm having. I'm hoping that there is just some simple CSS adjustments I need to make for the PDF version to get the layout to work correctly.

Thanks!

Jim

1. threecolumn.html‎ 0.8 kB ‎
   Source for simple three column layout
2. threecolumn.pdf‎ 14.1 kB ‎
   PDF produced by Prince 9

I'm attaching another file which uses red to outline the DIVs to show the issue. I tried setting the margins of the divs to 0 and it didn't make a difference. There must be some change I can make to get a three column output

1. threecolumn2.pdf‎ 14.2 kB ‎
   Output with red borders for divs

It works if you put the center column after the two floats.

Thanks! I didn't think to try that.

Ok, I made the change you suggested and got the three column layout to work, however, I have two places where I need three columns and the second one is not working properly.

My report has the three column, then it has a two column section, followed by another three column section. I made the change you mentioned in both places and the HTML output looks exactly as I want. However, I'm having problem with the PDF output. I'm attaching both my HTML and the resultant PDF to show you what is going on. I tried to pare down the HTML to a manageable size, but I wasn't able to make it smaller and still have the problem.

My example uses a set of divs contained in a containing div to implement a two column layout. The containing div uses a style which puts a 'clear:both' after the closing div. The next thing in the file is another grouping div which uses the three column layout we talked about. When I display the file in a browser, the page looks just like I would expect. When I generate the PDF, the first column in the three column layout floats up into the space which should be occupied by the first column of my two column setup. In our report, the right column will always have more data than the left.

I've tried a variety of things to keep my three column layout entirely below my two column div, but so far nothing has worked. Once again I'm probably overlooking something obvious and I hope you can help me out.

Thanks again.

Jim

1. sample.html‎ 31.1 kB ‎
   HTML for layout problem
2. sample.pdf‎ 47.0 kB ‎
   Prince 9 Output for sample.html

Specifying "overflow: hidden" on .group appears to do the trick.

Thanks!