How to I set an element to two column and keep the following text flow:

text 1 | text 3
text 1 | text 3
text 1 | text 3
text 1 | text 3
________________

2col image, etc
________________
text 2 | text 4
text 2 | text 4
text 2 | text 4
text 2 | text 4

Use "columns: 2" on the parent element, and "column-span: all" on the child element. Please ensure that you are running Prince 8.1 rev 2, as this includes a fix for incorrect behaviour of the column-span property.

I upgraded to 8.1rev2. Thanks. I am trying to have elements that are siblings with the same parent exhibit the above text flow. The section class is set to 2 columns and the figure class is set to span both columns. I've also set the <p> element to 2 columns and nested the <figure> span-all within it. Ideally, the <p> element would exhibit the above behavior around <figure> element. Is this possible?

        <div class="section" title="testing text flow around 2column elements">
          <div class="titlepage">
            <div>
              <div>
                <h3><span class="cnx-gentext-section cnx-gentext-t">testing text flow
                around 2column elements</span></h3>
              </div>
            </div>
          </div>

          <p>To give you a sense of cell size, a typical human red blood cell is about
          eight millionths of a meter or eight micrometers (abbreviated as eight &mu;m)
          in diameter; the head of a pin of is about two thousandths of a meter (two mm)
          in diameter. That means about 250 red blood cells could fit on the head of pin.
          Most student microscopes are classified as light microscopes (Figure
          04_01_01a). Visible light passes and is bent through the lens system to enable
          the user to see the specimen.

          <div id="m-biology2-bio-img2col" class="figure span-all" title="Figure&nbsp;1.5.&nbsp;Bio Test 2col Fig">
            <div class="body">
              <div class="mediaobject"><span id="m-biology2-biopic"></span><img src=
              "m-biology2/bio2.jpg" alt="BioTest" /></div>
            </div>

            <div class="title">
              <span class=
              "cnx-gentext-figure cnx-gentext-autogenerated">Figure&nbsp;</span><span class="cnx-gentext-figure cnx-gentext-n">1.5</span><span class="cnx-gentext-figure cnx-gentext-autogenerated">.&nbsp;</span><span class="cnx-gentext-figure cnx-gentext-t">Bio
              Test 2col Fig</span>
            </div>

            <div class="caption">
              Two column figure nested in a paragraph para fig /para.
            </div>
          </div>

          Light microscopes commonly used in the undergraduate college laboratory
          magnify up to approximately 400 times. Two parameters that are important in
          microscopy are magnification and resolving power. Magnification is the process
          of enlarging an object in appearance.</p>
        </div>

If this is a HTML document, a <div> tag will implicitly end the paragraph, as the parser will assume you just omitted the </p> when it sees the div begin. So you will need to use <div> for the paragraph in order to nest another div within it. If this is an XHTML document then it may work, as XML never assumes anything about tags, and does not automatically insert close tags.

However, with column-span you will get this output:

1 2
span
3 4

This is ideal if the span is a heading separating two sections, but not ideal if the span is a figure.

A new feature in Prince 8.1 is to combine float and column-span, like this:

.figure {
    float: prince-column-top;
    column-span: 2
}

This allows you to do this:

span
1 3
2 4

Or similarly with the image at the bottom, just not in the middle, for now.