Wrapping embedded images with a div When embedding an image in CKEditor on Drupal 7 any styles or alignment are applied directly to the image itself e.g.

&lt;img src="..." style="float: left; width: 90px; height: 150px" /&gt;


However this doesn't allow for a great deal of CSS control over the appearance for the image because the inline styles override CSS.

How can I do the following 2 things:


Automatically wrap the image in a div and apply classes to this instead of the img element
For alignment use classes (e.g. 'image-left', 'image-right' etc.) instead of inline styles


So the above example would instead be rendered as:

&lt;div class="image-left"&gt;
    &lt;img src="..." styles="width: 90px; height: 150px" /&gt;
&lt;/div&gt;
Instead of adding a wrapper div, you could use !important.

img {
    float: left !important;
    height: 150px !important;
    width: 90px !important;
}


This would override the style added in CKEDITOR. You could do the same for alignment using classes, adding them directly to the image through CKEDITOR.