Wrapping Between Topics: Newbie help

[AJLA_TS]

I am trying to create PDF output, and I have image-heavy topics and about 40 topics for my project, and when I create my output, the images start going wonky (Super technical term). How can I control image wrapping when the topics are combined in output? (Sorry I don't know how to phrase this well: see image.) Should I be adding code to my headings or to my image divs? The div for my images has the following properties (but I'm not really sure about the functionality of the page breaks).

MadCapSample.png

div.captions

float: right
font-family: Arial
font-size 10pt
margin: 5px
max-width: 90%
padding: 5px
page-break-after: auto
page-break-before: avoid
page-break-inside: avoid
position: absolute
text-align: center

h2
page-break-before: avoid

[devjoe]

The first thing I'd do is give your headings the CSS property clear: both. This will stop one topic from starting beside the div in another topic.

It there is still stuff messed up after that, give us another shout!

[AJLA_TS]

Unfortunately, that didn't help. Would using the flexbox properties make any sense for pdf output?

**EDIT: I don't know what I was doing then, but I can now say that adding clear properties to the headings was effective.**

[atomdocs]

Unfortunately flexbox isn't yet supported in Flare. If you write the CSS code yourself in your Flare project, it will work in HTML5 output, but not in PDF output. For PDF you need to go back to floats (if you want elements side-by-side) and make sure you clear them as devjoe says.

[bianca_writer]

For what it's worth, I just submitted a feature request to MadCap, requesting that the PDF output support flexbox.