On Tuesday, March 18, 2014 4:29:07 AM UTC-7, vpl wrote:
>
> <img src="solar.png" style="width: 50%;high: 50%; float: right;" />
>
> ! This is title
>
> * item-1
>
> ** item1.1
>
> * item-2
>
The problem you are having (where the image is taller than the tiddler
content and overflows the tiddler) is due to the way that CSS "float"
attribute works.
The image you specified has "float:right". This means that all content
that follows the image will be rendered next to the image, starting at the
same vertical position as the top of the image. If the content that
follows is longer than the image, then it continues to "flow" around the
image, until it is below the bottom of the image, after which it renders as
normal (i.e., using the full available width of the tiddler).
In your example case, the content of the tiddler is shorter than the image.
However, the *image* is still floating and, as I wrote above, **ALL**
content that follows the floating image will be "flowed" around the image
until it is below the bottom of the image. This includes content from the
tiddler that follows the one with the floated image.
Fortunately, in standard CSS usage, there is a way to explicitly terminate
the "float/flow" handling: when the browser encounters a DIV with CSS
attribute "clear:left", "clear:right" or "clear:both", it forces any
content within (or following) that DIV to be rendered AFTER the floated
image element.
Thus:
<img src="..." style="...;float:right;...">
this content will be
flowed NEXT to the image
<div style="clear:both;line-height:0px;">
this content will be rendered BELOW the image
</div>
and so will this content
if you don't have any content to follow the image, embed an empty DIV:
<img src="..." style="...;float:right;...">
content
<div style="clear:both;line-height:0px;"></div>
This should produce the results you are expecting (i.e., the floated image
is completely contained within the tiddler extents)
Of course, it's a bit inconvenient to remember to add this div to each
tiddler that has a floating image. Fortunately, there is a way to specify
the "clear:both" attribute using CSS within a stylesheet. All you need to
do is create a tiddler tagged with "$:/tags/stylesheet", containing the
following:
div.tw-tiddler-frame.tw-tiddler-exists:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
With this CSS in place, floated images will *automatically* be fully
contained inside the tiddler-frame, without needing to add any HTML to
individual tiddlers.
enjoy,
-e
Eric Shulman
TiddlyTools / ELS Design Studios
YOUR DONATIONS ARE VERY IMPORTANT!
HELP ME TO HELP YOU - MAKE A CONTRIBUTION TO MY "TIP JAR"...
http://TiddlyTools.github.com/fundraising.html#MakeADonation
Professional TiddlyWiki Consulting Services...
Analysis, Design, and Custom Solutions:
http://www.TiddlyTools.com/#Contact
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.
