An info box (my definition, Information Architects probably have a better word for it… Peter?) contains some background info you want to add it as a side note, separate from the normal text flow. You can achieve the effect in 2 steps:

Define containing css classes

First we want to have a css class wrapping the box, sizing and positioning it on the right side in the blog text.
Simply add this to the style.css file of your theme:

.entrytext .infobox
{
width: 200px;
position: relative;
float: right;
padding: 0px;
margin: 0px 0px 10px 10px;
border: 1px solid #06c;
}

Then define infobox header and body text:

.entrytext .infoboxbody
{
font-size: 0.75em;
padding: 10px;
line-height: 1.2em;
}
.entrytext .infoboxheader
{
color: #FFFFFF;
font-weight: bold;
text-align: center;
line-height: 3em;
background-color : #06c;
}

Create your custom “quicktag”

Of course you do not want to write

<div class="infobox">
<div class="infoboxheader">Infobox Title</div>
<div class="infoboxbody">Infobox Body text</div>
</div>

every time manually. In /wp-admin/quicktags.js you can copy-paste:

edButtons[edButtons.length] = new edButton(‘infobox’
,’IBox’
,’<div class="infobox"><div class="infoboxheader">Infobox:
Title</div><div class="infoboxbody"></div>Infobox Body text</div>’
,”
,’x’
);

to get your own IBox button

in between the similarly looking other definitions. The 5th argument makes the ‘SHIFT+ALT+x’ a shortcut key for inserting a dummy info box. By the way: the extra “H3″ button is the result of almost identical code:

edButtons[edButtons.length] = new edButton(‘heading_3′
,’H3′
,’<H3>’
,’</H3>’
,”
);

the only difference being that with <H3> and </H3> split over 2 arguments, the same button will open and afterwards close the tag, or wrap selected text within them immediately.

Some caution

Note that /wp-admin/quicktags.js is not included in your WordPress theme, and so can be overwritten when upgrading WordPress. So don’t forget to document this somewhere you can refer back to when upgrading. Hey… why not simply blog it?

Update June 15: feeds…

Doesn’t seem to be a good idea if you include your entire posts in rss feeds: Bloglines preview… Including css in rss feeds (or rather, in the html of each and every individual post) is probably not really what rss is made for, and using tables or inline css makes the widget far less attractive… Any ideas?