I suppose this might be more of a 'using TinyMCE' sort of question...but I am also tweaking the CMS stylesheet, so it can work both ways.

Often I have a small image that doesn't take up the entire width of a column, which means I will get a request to float the text around the (less wide) image. What's the best way to go about this?

I can use tables but that's just plain ugly.

I can also align the image to the left or the right, but the padding between the image and the text never looks quite right when I set the hspace and vspace attributes...

2 answers


Depending on which version of TinyMCE you are using you can often right-click on the image in the WYSIWIG and use the alignment option. It adds inline styling like "style="float:left;" to an image.

You can also add classes to the editor and stylesheet to control it... something like float-left or float-right -- Then you can use them for other things like blocks of text.

Answered about 8 years ago by Darcy Bross

I add classes to the admin stylesheet for TinyMCE and duplicate these classes in a stylesheet that will display on the public site. Class names appear in the styles dropdown and can be applied to elements in the editor. To float images in text I would add these to your style sheets:

.Left { float: left; margin: 0 1em 1em 0; }
.Right { float: right; margin: 0 0 1em 1em; }
Answered about 8 years ago by Artistic Abode