I am using Moodle to do internal company training, such as this intro course to Microsoft system (a quick 'book' I'm writing to figure out what I'm doing):

I managed to get that right-aligned grey box you see above by defining my own markup styles as follows:

You can see above I created a div (called 'figure-right') that aligns content to the right and displays it in a nice box. Somehow the style defined in mod/book/book_theme.css and in mod/book/book_print.css do not result in the div wrapper being displayed correctly in the editor:

I have tried also putting the extra style information in themes/mythemename/styles.css and in lib/editor/htmlarea.css with no luck.
My CSS information basically looks like this:
.figure-right, .figure-left {
color: #660000;
width: 40%;
float: right;
padding: 5px 5px 5px 5px;
margin: 5px 0px 5px 10px;
border: 1px solid #aaaaaa;
background-color: #cccccc;
clear: right;
}
.figure-right>h3, figure-left>h3 {
padding-top: 0px;
padding-bottom: 3px;
margin-top: 0px;
margin-bottom: 0px;
}
The HTML for the div looks like this:
<div class="figure-right"><h3>William H. Gates III</h3>
The richest man in the world<br />
<center><img width="91" vspace="2" hspace="2" height="134" border="1" align="middle" alt="Bill_Gates1.jpg" src="http://localhost/moodle/file.php/2/Bill_Gates1.jpg" /></a>
</center><br />
<em>... I went to the garbage cans at the Computer Science Center and fished out listings of their operating system.</em></div>
Can anyone help?
Adam