[pmwiki-users] Image and Text Alignment

H. Fox haganfox at users.sourceforge.net
Mon Feb 13 11:57:03 CST 2006


On 2/13/06, Hans <design at softflow.co.uk> wrote:
> To keep image and description always side-by-side together, and have
> each pair floated as one unit, one needs to bundle each pair into a
> div, and apply a float style to both image and description.
> The latter should also carry a width to force line breaks.
> A bottom margin for the floated divs keeps them vertically spaced.
> Paddings and borders can also be used.
> At the end all those floating "cells" need to be followed by a
> clear=both [[<<]] markup, to force subsequent text underneath.
>
> >>lfloat margin-bottom=10px<<
> %lfloat%image
> %lfloat width=150px%description......
> >>lfloat margin-bottom=10px<<
> %lfloat%image
> %lfloat width=150px%description......
> >>lfloat margin-bottom=10px<<
> %lfloat%image
> %lfloat width=150px%description......
> >>lfloat margin-bottom=10px<<
> %lfloat%image
> %lfloat width=150px%description......
> >><<
> [[<<]]

This one provided some inspiration for a table-based solution.  (It
is, in fact, a table isn't it?)

(:table:)
(:cell style='padding:5px;':)
%lfloat margin-top=5px%image
description......
(:cell style='padding:5px;':)
%lfloat margin-top=5px%image
description......
(:cellnr style='padding:5px;':)
%lfloat margin-top=5px%image
description......
(:cell style='padding:5px;':)
%lfloat margin-top=5px%image
description......
(:tableend:)

http://www.pmwiki.org/wiki/Test/ImageTable

Hagan




More information about the pmwiki-users mailing list