Pull-left & Pull-right

To allow text in the content area to flow around an image (or other graphic or object), you can use either the "pull-left" or the "pull-right" style. The style should be applied to the image, and not to the text.

Applying the styles to an image:

1. With textual content in your main content area, first make sure the text which you intend to have wrapped around your image has been assigned as the "Paragraph" Format. (If only because it can be awkward to try to wrap List items, Headlines, or Tables, etc. around an image!)
    
2. Next, insert your image: Place your cursor at the very beginning of the paragraph where you want the wrap to start and use the 'Insert/Edit Image' tool to place the image. (If it turns out that you want to move the image, you can do that later by selecting and dragging it, by cutting and pasting it, and/or by deleting it and re-inserting it elsewhere.)
    
3. Then select the image by clicking on it once. Then, while it is selected, assign either "pull-left" or "pull-right" to it from the Styles popout. For example: Formats: Custom: CSS Styles popout: pull-left
    
4. Submit the page to save your edits and review the page in the Preview panel. (You will not see the style's action within the WYSIWYG editor.)
    

Pull-left style applied to image:

This paragraph is wrapping around an image with the "pull-left" style applied to it. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?

If you look at the code you will see the Image tag has a class="pull-left" statement in it:
<img alt="Library Words Sculpture" class="pull-left" src=" ...

Pull-right style applied to image:

This paragraph is wrapping around an image with the "pull-right" style applied to it. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?

If you look at the code you will see the Image tag has a class="pull-right" statement in it:
<img alt="Library Words Sculpture" class="pull-right" src=" ...

Compare to no style applied to image:

Here, the image is still inserted just before this paragraph; however, it has neither "pull-left" nor "pull-right" applied to it, so the text does not wrap around the image. The lines of this paragraph may appear fractured, broken oddly, as the picture is treated like just another word in a sentence - a really tall word, that the next line starts beneath.

No wrapping

Naturally, choosing to not have text wrap around the picture at all is a valid option. In this particular instance, a soft break (shift+return) has been added between the picture above and the beginning of the text. A full line break (starting a new paragraph - using return) may also be employed. The picture then sits independent of the text, aligning as however its area of the page is set to align.

Return to: Using the Styles Popout - Custom CSS Selector