So, what if we did wrap the images?

Wrap spike: a throwaway test post. Each heading says what should happen.

Test 1: table, float left, long text. The text wraps beside the image, then runs underneath it.

This paragraph is ordinary Ghost text, typed in the editor, not inside the card. In email it should sit beside the image and then carry on at full width once it passes the bottom of the image.

A second paragraph keeps going so the text is clearly taller than the image. Ghost’s own paragraph styling should apply here, exactly as it does everywhere else in the newsletter: the same font, size, colour and spacing.

A third paragraph. By now the text should have passed the image and be running the full width of the column. If this line is still squeezed beside empty space, the float isn’t working on this surface.

A fourth paragraph, for good measure, so the flow under the image is easy to see on a wide screen as well as in the email column.

Test 2: table, float right, short text, end card = clear div.

Only one short paragraph here, so the image is taller than the text and the end card has to clear the float.

↑ This heading should sit BELOW the image (Test 2 clear).

This paragraph follows the heading at full width.

Test 3: table, float left, short text, end card = clear div + <br clear="all">.

Only one short paragraph here, so the image is taller than the text and the end card has to clear the float.

↑ This heading should sit BELOW the image (Test 3 clear).

This paragraph follows the heading at full width.

Test 4: a bare <img align="left"> instead of a table (for comparison in Outlook).

This paragraph is ordinary Ghost text, typed in the editor, not inside the card. In email it should sit beside the image and then carry on at full width once it passes the bottom of the image.

A second paragraph keeps going so the text is clearly taller than the image. Ghost’s own paragraph styling should apply here, exactly as it does everywhere else in the newsletter: the same font, size, colour and spacing.

A third paragraph. By now the text should have passed the image and be running the full width of the column. If this line is still squeezed beside empty space, the float isn’t working on this surface.

Test 5: control, NO end card. In email this heading’s neighbour may move up beside the image; on the web the image stands alone.

Only one short paragraph here, so the image is taller than the text and the end card has to clear the float.

Heading after a float with no end card.

This paragraph follows it.