I am trying to float text around images, where some of the text needs to be floated right, some left, and leaving odd amounts of space. I have something that works in a browser, but not when Princed.

I'm not attached to this approach; if there's a cleaner way to do this, I would love to hear about it.
Any help would be appreciated.


What I have is a "masked_figure" class that contains
1. an absolutely positioned "mask_bg", with the actual image
2. some left and right spacers, which float to either side.

The HTML is:
<div class="example_page">Staynes1912 _032.mask.jpg - redone<div class="figcenter">
<div class="masked_figure" id="Staynes1912_032">
<div class="mask_bg"><img alt="Staynes1912_032" src="_032.mask.jpg" width="100%" /></div>
<div class="lspacer" style="width: 64%; height: 1.68in;">
</div>
<div class="rspacer" style="width: 100%; height: 0.67in;">
</div>
<div class="rspacer" style="width: 62%; height: 1.07628865979381in;">
</div>
<div class="rspacer" style="width: 100%; height: 0.0463917525773196in;">
</div>
<div class="rspacer" style="width: 47%; height: 2.58865979381443in;">
</div>
</div>
</div>
<p>hello hello hello hello hello hello hello hello hello hello
hello hello hello hello hello hello hello hello hello hello
...
</p>
<p>hello hello hello hello hello hello hello hello hello hello
hello hello hello hello hello hello hello hello hello hello
...
</p>
</div>






And, the relevant CSS looks like this:

.masked_figure{
display: block;
background: pink;
width: 100%;
width: 4.5in;
height: auto;
border: 4px solid red;
border-bottom: 4px dotted yellow;
text-align: center;

position: relative;
}

.mask_bg{
position: absolute;
top: 0;
left: 0;

border: 3px dotted navy;
background: orange;
width: 100% !important;
margin: auto;
z-index: -5;
}
.mask_bg img{
min-width: 100%;
}
.rspacer{
display:block;
float:right;
clear:right;
}
.lspacer{
display: block;
float:left;
clear:left;
}

1. Staynes1912 - Masks - Firefox Screenprint.pdf‎ 1.3 MB ‎
   Working in Firefox
2. Staynes1912_masks_viaPrince.pdf‎ 1.1 MB ‎
   Not working with Prince
3. masksTrial.zipx‎ 3.0 MB ‎
   Zip with all html, css, images

Thanks, would you be able to reupload the ZIP file using an older version of WinZip? Unfortunately the .zipx file cannot be easily extracted on Linux.

Sorry about that.
Here's the .zip file

1. masksTrial.zip‎ 3.3 MB ‎
   Now readable?

Thanks, that's much better.

It seems that if all the spacer divs are on the left or the right then the text will flow from top to bottom as expected, but if the spacers alternate and overlap then they take all the available space, and the text will be pushed down until the next available gap. We will do some further investigation, but this may not be easy to fix in the short term.

Hi Mike,
Thanks for looking into this.

Something like what you say seems right - certainly alternating hurts.
But,
1) Prince has no trouble with parallel left and right spacers (see case _511 in attached), and
2) Case _089 in the attached has only left spacers (using lspacer here for the full-width case), and that doesn't work.

1. Staynes1912_masks.pdf‎ 1.9 MB ‎
   new examples

I think it's the full width case that's the problem; if any individual spacer or overlapping spacers takes up the full width, then the text won't start until after them, even if there is an available gap earlier.