Floated Table Extends Beyond the Tiddler

#1

So, I’m trying to set up a little fact sheet table sort of like the biography table used in Wikipedia articles about people. Here is an example from today’s front page: Michelle O'Neill - Wikipedia

Floating that element on the right isn’t that hard, I just enclose it with

 <div style="float:right;margin:10px;">


| !Fact Sheet |<|
|Fun Fact | This is some stuff |
|Another Fact | Blah Blah Blah |
|More Facts | [[Additional Facts]] | 


 </div>

Ipsum lorem and all that...

The problem is, when that fact sheet is longer than the main body of the tiddler, then it overflows beyond the bottom of the tiddler.

What is the best way to force the tiddler to fit the contents?

#2

Put <div style="clear:both;"/> at the end of the tiddler content

-e

1 Like
#3

Like this?

<div style="float:right;margin:10px;clear:both;">


| !Fact Sheet |<|
|Fun Fact | This is some stuff |
|Another Fact | Blah Blah Blah |
|More Facts | [[Additional Facts]] | 


 </div>

Ipsum lorem and all that...

That didn’t do anything.

#4 
 <div style="float:right;margin:10px;">


| !Fact Sheet |<|
|Fun Fact | This is some stuff |
|Another Fact | Blah Blah Blah |
|More Facts | [[Additional Facts]] | 


 </div>

Ipsum lorem and all that...

<div style="clear:both;"/>
#5

Ah, interesting. Just add a whole new div. That worked. Thank you both.