As Eric points out, this is just how browsers lay out things that have the 'float' property set. If you explicitly add the "float: right" property to your image, you have to be okay with what float actually does.
Anyway here's an explanation of why float works the way it does: http://css-tricks.com/containers-dont-clear-floats/ It's nice to see that stuff that appears to be a stupid decision by CSS designers is actually well thought out.. On 19 March 2014 02:26, Eric Shulman <[email protected]> wrote: > 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. > -- Daniel Baird retro objoke: Chuck Norris had a problem so he decided to use regular expressions. Now, every problem in the world is solved. -- 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.
