[pmwiki-users] Image and Text Alignment

[Hans]

Monday, February 13, 2006, 12:15:06 AM, Hans wrote:
> for a tableless solution you could try something like this:

> %lfloat%image
> %lfloat width=200px margin-right=30px%description........
> %lfloat%image
> %lfloat width=200px%description........
> [[<<]]
> %lfloat%image
> %lfloat width=200px margin-right=30px%description........
> %lfloat%image
> %lfloat width=200px%description........
> [[<<]]

Actually this does not work too well, as each float is separate, so
floats will drop one by one as the window is getting narrower, thereby
separating image from description. (happens on your site for a 1024px
wide screen full width window)

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......
>><<
[[<<]]


Best, 
~Hans