I'm experimenting with floating sidebars* in blog articles.  If it works out okay and is legible in your browser let me know.  Do you see the “floatie” on the right?  Does it look okay to you or does it not render correctly?  I'm all ears.  Lemme know!

I'm a bit flummoxed because the BlogHarbor editor doesn't render things with my stylesheet if I use CSS classes, it only shows it correctly if I use the “style” attribute of the tag.  For the effect shown here I used the following HTML:

<DIV class=rightFloatie><DIV class=floatieInset>*</DIV>A floating sidebar is just a demarcated region of text that the rest of the article flows around.&nbsp; I'm experimenting with CSS classes to allow me to quickly insert floating sidebars on the left or the right…<BR><BR>Like this one. Can you see this?</DIV>

<P>I'm experimenting with floating sidebars<SPAN class=floatieNote>*</SPAN> in blog articles.&nbsp; If it works out okay and is legible in your browser let me know.&nbsp; Do you see the “floatie” on the right?&nbsp; Does it look okay to you or does it not render correctly?&nbsp; I'm all ears.&nbsp; Lemme know!</P>

And here is the CSS for the three classes rightFloatie, floatieInset, and floatieNote:

.rightFloatie {
    float: right;
    margin-left: 16px;
    width: 225px;
    border: #999 1px dotted;
    padding: 8px;
    background-color: #f9f9ff;
    color: #3366ff;
    font-size: 8pt;
    font-style: italic;
    font-family: Verdana,Helvetica,Arial,sans-serif;
    text-align: justify;
} 
.floatieInset {
    float: left;
    margin-bottom: 1px;
    margin-right: 1px;
    font-size: large;
    font-weight: bold;
}
.floatieNote {
    font-size: medium;
    font-weight: bold;
    color: #3366ff;
    font-family: Verdana,Helvetica,Arial,sans-serif;
}

The “.rightFloatie” (and matching “.leftFloatie”, not shown) are what make the floating sidebar itself.  The “.floatieInset” is for the asterisk inside the sidebar.  This makes the asterisk BIG and lets the remaining text inside the sidebar flow around it.  You don't really need an inset, I just like the way it looks.  Finally “.floatieNote” is for the asterisk in the main body of the article.  Using these insets I could, for example, have numbered notes and so forth.  Right now the width is hardcoded at 225 pixels for the sidebar, I may experiment with other widths in the future, but for now it serves well enough.

I've already future posted an article for tomorrow morning which contains a “floatie”.  Hope it's readable!