Custom <div> styles surrunding <p>'s

Hey all,

I was wondering if anyone has experience in configuring CKeditor help content editors to insert a <div> 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 <div>?

Any help would be greatly appreciated

Regards
Sean