Blog

This post:  http://clintavo.com/blog/61556/blog-layout-tests  *should* be wrapping text around images without tables.  In my tests it worked both in desktop and mobile versions of this site.

Here's how I did it:

If you want to try a non-table layout, (which is something we're still developing and testing for our Generation 3 and up templates).  The instructions are below. I am planning a better blog post on this subject.

The blog post linked to at the top  was created using the instructions below.

If you're not using a Generation 3 template, then it should work if you add the following css in your Site Design Center -> Advanced -> Custom CSS:

.faso-img-alignleft {display:inline;float:left;margin-right:15px;}

.faso-img-alignright {display:inline;float:right;margin-left:15px;}

.faso-img-aligncenter {clear:both;display:block;margin-left:auto;margin-right:auto;}

*********************************************************

Here's What I Did:

Paste your text in as plain text - that clears out any "rogue" html.  

Do this by clicking the 5th icon from the left on the toolbar and then pasting the text with ctrl-v

Set up your paragraphs with no images (ie add lines between paragraphs where you want them)

If you want an image at the top add a couple of blank spaces at the top above your first paragraph and insert the image.
center it if you want by clicking the "align center" icon on the top toolbar

Enter two blank lines after any paragraph you don't want to be included in the image wrapping

Place the cursor at the beginning of the paragraph that you want to wrap text around an image (on the same line with the text - not on the line above it)

Insert the image.

Click the image and click the "align left" icon

Place the cursor at the beginning of the next paragraph you want to wrap text around.

Insert the image

On the top toolbar click the "align right" icon

If something doesn't align correctly (since this is not 100% foolproof) click the undo button on the top toolbar and try again, maybe adding additional lines between paragraphs.

At the bottom insert an image two lines after the last paragraph

Click the "align center" on the top toolbar.

"Save and preview"

When you publish it, this should align properly on Generation 3 and up templates.

It also aligns properly on mobile (has been tested on iphone in landscape mode and reflows properly when the iphone is in portrait mode, moving the images underneath paragraphs when there isn't sufficient screen width).