CKeditor Custom styles dropdown - floats - ckeditor

Question

I am using CKEditor version 4. I am making custom styles. The problem is, when the styles are shown in the dropdown, any styles with float:right move over on the display like this:
Item 1
Item 2
FLoat right item
Normal Item
I have been trying to override the styles but it is not working. They are created dynamically with JavaScript and I am not even sure the class names to affect this.
Anyone know how I can fix this?
My code for the styles is like this:
{ name: 'Image 25% Right', element: 'span', attributes: { 'class': 'img_right_25' } },
{ name: 'Image 25% Left', element: 'span', attributes: { 'class': 'img_left_25' } },
{ name: 'Image 50% Right', element: 'span', attributes: { 'class': 'img_right_50' } },
{ name: 'Image 50% Left', element: 'span', attributes: { 'class': 'img_left_50' } },
and then
.img_right_25 {
float:right;
margin-left:10px;
}
.img_left_25 {
float:left;
margin-right:10px
}

Answer 1

In editor.css, try adding a rule like this:
.cke_panel_listItem * {
float:none !important;
}
Then refresh the page (make sure that the old contents of editor.css is not being used from cache!).
What this is trying to do (I haven't tested it) is force every descendant element under .cke_panel_listItem to have a float value of "none". The !important should make sure that that this rule cannot be overridden by subsequent style definitions and so the styling made by JS is disregarded.