How do I insert an image beside text in a box?
When you insert an image into a box, one of the options on the Insert/edit image screen is Alignment. If you choose either left or right, it will align your image to the left side or right side of the box and allow text to wrap around it.
For example, the image in this answer is right aligned. I put my cursor at the beginning of the preceding paragraph (to the left of "When") and added the image, choosing right from the Alignment dropdown.
The align attribute uses the style context "float: left;" or "float: right", which can sometimes make the images "float" outside of the box boundaries. Sometimes you need to add some extra space, or go into the Plain Text Editor and add <br clear="all" /> to the HTML just before the last </p> to ensure that the image stays within the appropriate box.
- Click on the tree icon () in the 2nd row of options.
- Click on the red Click to upload an image… link.
- Uploading an Image:
- Click Browse and find the image on your computer.
- Click Upload Image.
- Add an Image: click on the image from your personal image library (bottom of box).
- The URL is automatically added on the Insert Image screen. You can now change the alignment. You want to choose either left or right to have text wrap around the image.
- Add a couple of pixels of Vertical and Horizontal space to add a little elbow room around the sides of your image - this prevents the text from touching the image directly.
- Click the Insert button to add the image to your content box.
- Click Save Changes to save the box content.