Custom <div> styles surrunding <p>'s [#951136]

Hey all,

Not too sure if this is a support request for the drupal module or for the actual CKeditor itself, so I have cross posted this in both forums (http://cksource.com/forums/viewtopic.php?f=6&t=20533) ;)

I was wondering if anyone has experience in configuring CKeditor help content editors to insert a

block around some HTML.

Example:

<h3>Heading</h3>
<p>Sample text</p>
<ul>
	<li>item 1</li>
	<li>item 2</li>
</ul>
<p>more text</p>

I would like to have a styles dropdown that a content editor could click on that would essentially change the above (assuming this is what they highlighted in the WYSIWYG) into this:

<div class="note">
	<h3>Heading</h3>
	<p>Sample text</p>
	<ul>
		<li>item 1</li>
		<li>item 2</li>
	</ul>
	<p>more text</p>
</div>

I have configured a 'ckeditor.styles.js' to include a section:

    /* Object Styles */
  {
    name : 'Note box',
    element : 'div',
    attributes :
    {
      'class' : 'note'
    }
  },

And this does will make an item show up in the 'Styles' section of CKeditor, unfortunately when applied to my sample block of HTML, produces this:

<div class="note">
	Heading</div>
<div class="note">
	Sample text</div>
<ul>
	<li>
		<div class="note">
			item 1</div>
	</li>
	<li>
		<div class="note">
			item 2</div>
	</li>
</ul>
<div class="note">
	more text</div>

Does anyone have any idea if CKeditor can be configured to retain existing tags, and only add a new (single) wrapping

Any help would be greatly appreciated

Regards
Sean