<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<p>rfloat and lfloat are css classes injected into the HTML header
via PmWiki's wikistyles.php script, like:</p>
<div
style="color: #cccccc;background-color: #1f1f1f;font-family: Consolas, 'Courier New', monospace;font-weight: normal;font-size: 18px;line-height: 24px;white-space: pre;"><div><span
style="color: rgb(215, 186, 125);">.lfloat</span><span
style="color: #cccccc;"> {</span><span style="color: #9cdcfe;">float</span><span
style="color: #cccccc;">:</span><span style="color: #ce9178;">left</span><span
style="color: #cccccc;">; </span><span style="color: #9cdcfe;">margin-right</span><span
style="color: #cccccc;">:</span><span style="color: #b5cea8;">1%</span><span
style="color: #cccccc;">;}</span></div><div><span
style="color: #d7ba7d;">.rfloat</span><span style="color: #cccccc;"> {</span><span
style="color: #9cdcfe;">float</span><span style="color: #cccccc;">:</span><span
style="color: #ce9178;">right</span><span style="color: #cccccc;">; </span><span
style="color: #9cdcfe;">margin-left</span><span
style="color: #cccccc;">:</span><span style="color: #b5cea8;">1%</span><span
style="color: #cccccc;">;}</span></div></div>
<p>I would use float and not align, as that is what you try to do,
so the subsequent text will flow around the image. To make sure
the width style is only applied to the container and not the image
as well, you could use adiv wrapper, like:</p>
<pre>>>float=right width=33pct margin=3pct p70i<<
[[Attach:test-03.jpg|Attach:test-03.jpg"Here you can read the tooltip text!"]]| This is a fine picture!
>><<
followed by your text paragraph(s).</pre>
<p>You could use rfloat insted of float=right.</p>
<p>Or, alternatively, you could define your own css classes (in
pub/css/local.css for instance). As an example:</p>
<div
style="color: #cccccc;background-color: #1f1f1f;font-family: Consolas, 'Courier New', monospace;font-weight: normal;font-size: 18px;line-height: 24px;white-space: pre;"><div><span
style="color: #cccccc;">/* right-float with 33% width and some margin */
.rfloat33 {</span><span style="color: #9cdcfe;">float</span><span
style="color: #cccccc;">:</span><span style="color: #ce9178;">right</span><span
style="color: #cccccc;">; width:33%; </span><span
style="color: #9cdcfe;">margin</span><span style="color: #cccccc;">:</span><span
style="color: #b5cea8;">2%</span><span style="color: #cccccc;">; </span><span
style="color: #9cdcfe;">padding</span><span style="color: #cccccc;">:</span><span
style="color: #b5cea8;">5px</span><span style="color: #cccccc;">;}</span></div></div>
<p>and then use that in the wikistyle markup, like:</p>
<pre>%rfloat33 p70i%[[Attach:test-03.jpg|Attach:test-03.jpg"Here you can read the tooltip text!"]]| This is a fine picture!
and followed by your text...</pre>
<p>The amber skin has got a file grid.css with a number of
positioning shorthand classes defined, created to help with
responsive grid layouts.</p>
<p>Hope this may help a bit.</p>
<p>cheers,<br>
Hans</p>
<p><br>
</p>
<div class="moz-cite-prefix">On 31/10/2025 12:43, Martin Cuno wrote:</div>
<blockquote type="cite"
cite="mid:4cygd16NVfz9rxM@submission02.posteo.de">
<pre wrap="" class="moz-quote-pre">Hi everyone!
I frequently position images on websites and have become accustomed to doing so with the following specifications, e.g.: %align=right width=33pct hspace=3pct vspace=3pct p70i%
For a while, I used "rfloat" and "lfloat" instead of "align," but I couldn't get it to work. Even now, I see that the position and size are incorrect. I found this confirmed here: <a class="moz-txt-link-freetext" href="https://www.pmwiki.org/wiki/PmWiki/Images-Talk">https://www.pmwiki.org/wiki/PmWiki/Images-Talk</a> (see: Why doesn't pct specification work in conjunction with lfloat?). Is there any clarification on this? While testing, I got the impression that it stops working above a certain image size (file size or pixels!).
I would like to be able to insert captions using the syntax shown: "|This is the caption" appended to the image specifications. But this only works with rfloat/lfloat, and then the other settings are no longer correct.
I'd prefer to stick with "align" because my websites are full of it. But how can I get captions?
The problem is visible on my test page: <a class="moz-txt-link-freetext" href="https://www.edition-lgc.de/i.php?n=Sandbox.Testseite0001">https://www.edition-lgc.de/i.php?n=Sandbox.Testseite0001</a>
Does anyone know a simple solution that I can easily use in my daily work?
Thanks!
Martin
</pre>
</blockquote>
</body>
</html>