[pmwiki-users] floats and vspace

Patrick R. Michaud pmichaud at pobox.com
Fri Mar 25 09:45:12 CDT 2011


On Fri, Mar 25, 2011 at 12:58:12PM +0000, Hans wrote:
> <p class='vspace'>PARAGRAPH BEFORE FLOATS
> </p>
> <p class='vspace'><span class='lfloat'>ABC</span>
> <span class='lfloat'>DEF</span>
> <span class='lfloat'>GHI</span>
> </p>
> <p class='vspace'><span class='lfloat'>KLM</span>
> <span class='lfloat'>NOP</span>
> <span class='lfloat'>QRS</span>
> </p>
> <p class='vspace'>PARAGRAPH AFTER FLOATS
> </p>
> [...]
> but I'd like display like this:
> 
> PARAGRAPH BEFORE FLOATS
> 
> ABC DEF GHI
> 
> KLM NOP QRS
> 
> PARAGRAPH AFTER FLOATS
> 
> i.e. with the empty lines in the source creating <p class=vspace>
> the display should show vertical spacing. It should not be obliterate
> by <span class=lfloat>

The problem is that the second and third paragraphs are empty
except for the floating span content.  Therefore the browser thinks
the paragraphs have no display content of their own to give the
class='vspace' margin of the subsequent paragraphs something to 
"push against".  (The floating content is considered to be independent
of a paragraph that contains it -- i.e., there's no implied "clear"
at the end of the paragraph.)

To see this, try adding "ZZZ" after the "%lfloat%GHI" and "%lfloat%QRS"
lines of the source markup.  (Or look at 
http://www.pmwiki.org/wiki/Test/ParagraphFloats.)  You'll see that
when there's some non-floating content in the paragraphs, you get
closer to the display output you're looking for.

I tried using   in each of the paragraphs, that seems to have
helped so that it gives the visual rendering you want.

If you're wanting to do this without any paragraph content, 
you'll likely need to figure out a way in CSS and/or wikistyles
to force the (empty) paragraphs to take up vertical space in 
the display.

Pm



More information about the pmwiki-users mailing list