Wrap text around an image

Sometimes you an image just needs to have a text wrap or it looks too awkward. To do this you will need to go into the HTML Editor and find the code for you image. The beginning of the image code will look like this: <img src="https://.... Paste the code below between img and src. Then check the Rich Content Editor to see if it worked. If you want your image on the right, change the word left to right.


style="padding: 0 15px; float: left;"

<img   src="$CANVAS_COURSE_REFERENCE$/files.....

<img style="padding: 0 15px; float: left;" src="$CANVAS_COURSE_REFERENCE$/files.....


Man with a television head sitting in a tunnel.jpgLorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla id arcu. Pellentesque placerat blandit odio. Duis sit amet velit. Nam urna risus, lobortis sed, porttitor interdum, facilisis in, massa. Nullam malesuada. Ut semper, ipsum sed porta ultrices, augue metus venenatis lorem, non luctus orci orci ac neque. Pellentesque lacus. Praesent hendrerit, enim ut ornare vestibulum, sem arcu tincidunt velit, quis condimentum nulla libero vehicula mi. Vestibulum dignissim lectus nonummy ipsum. Proin eu eros. Donec dignissim, mauris sed elementum porttitor, purus ante sollicitudin magna, in tempus tellus purus sit amet arcu. Aenean tincidunt, libero a vivera tristique, urna nisl mollis nisl, ac fermentum dui libero eu mi.

Praesent consectetuer ante pellentesque ipsum. Cras consequat rhoncus turpis. Vestibulum tempus dolor vel urna. Cras et mauris vitae urna varius viverra. Fusce suscipit leo in ante. Duis lobortis justo. Morbi sed sem. In vulputate consectetuer eros. Etiam erat ipsum, blandit ut, nonummy quis, vestibulum at, lorem. Suspendisse metus augue, venenatis vitae, fermentum nec, dictum a, lorem. Duis aliquam pellentesque justo. Morbi dignissim nibh vitae arcu. Vestibulum ullamcorper porta nunc.

Pellentesque ut dolor. Donec imperdiet. Etiam volutpat diam a libero. Donec auctor, nisi in sodales mattis, metus lectus laoreet arcu, vel consectetuer nunc ante sed odio. Ut nec mi. Donec dictum facilisis leo. Nulla aliquam lacus at augue. Etiam sodales. Proin sit amet velit vel nunc tincidunt feugiat. Etiam feugiat. Sed ut sapien eget sapien bibendum imperdiet.


The code above is what the Canvas Guides will give you. It's fine but if you are nitpicky like me, you'll notice that there is now padding (space) on the left side of the image so that it doesn't really align with the text (grrrr...). The trick is to understand the padding specifications. It goes clockwise with the first being Top,then Right, then Bottom, and finally Left. So you could write style="padding: 0px 15px 0px 0px; float: left;" and the result would be:


Man with a television head sitting in a tunnel.jpgLorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla id arcu. Pellentesque placerat blandit odio. Duis sit amet velit. Nam urna risus, lobortis sed, porttitor interdum, facilisis in, massa. Nullam malesuada. Ut semper, ipsum sed porta ultrices, augue metus venenatis lorem, non luctus orci orci ac neque. Pellentesque lacus. Praesent hendrerit, enim ut ornare vestibulum, sem arcu tincidunt velit, quis condimentum nulla libero vehicula mi. Vestibulum dignissim lectus nonummy ipsum. Proin eu eros. Donec dignissim, mauris sed elementum porttitor, purus ante sollicitudin magna, in tempus tellus purus sit amet arcu. Aenean tincidunt, libero a vivera tristique, urna nisl mollis nisl, ac fermentum dui libero eu mi.

Praesent consectetuer ante pellentesque ipsum. Cras consequat rhoncus turpis. Vestibulum tempus dolor vel urna. Cras et mauris vitae urna varius viverra. Fusce suscipit leo in ante. Duis lobortis justo. Morbi sed sem. In vulputate consectetuer eros. Etiam erat ipsum, blandit ut, nonummy quis, vestibulum at, lorem. Suspendisse metus augue, venenatis vitae, fermentum nec, dictum a, lorem. Duis aliquam pellentesque justo. Morbi dignissim nibh vitae arcu. Vestibulum ullamcorper porta nunc.

Pellentesque ut dolor. Donec imperdiet. Etiam volutpat diam a libero. Donec auctor, nisi in sodales mattis, metus lectus laoreet arcu, vel consectetuer nunc ante sed odio. Ut nec mi. Donec dictum facilisis leo. Nulla aliquam lacus at augue. Etiam sodales. Proin sit amet velit vel nunc tincidunt feugiat. Etiam feugiat. Sed ut sapien eget sapien bibendum imperdiet.


So now let's try style="padding: 0px 0px 0px 15px; float: right;"


Man with a television head sitting in a tunnel.jpgLorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla id arcu. Pellentesque placerat blandit odio. Duis sit amet velit. Nam urna risus, lobortis sed, porttitor interdum, facilisis in, massa. Nullam malesuada. Ut semper, ipsum sed porta ultrices, augue metus venenatis lorem, non luctus orci orci ac neque. Pellentesque lacus. Praesent hendrerit, enim ut ornare vestibulum, sem arcu tincidunt velit, quis condimentum nulla libero vehicula mi. Vestibulum dignissim lectus nonummy ipsum. Proin eu eros. Donec dignissim, mauris sed elementum porttitor, purus ante sollicitudin magna, in tempus tellus purus sit amet arcu. Aenean tincidunt, libero a vivera tristique, urna nisl mollis nisl, ac fermentum dui libero eu mi.

Praesent consectetuer ante pellentesque ipsum. Cras consequat rhoncus turpis. Vestibulum tempus dolor vel urna. Cras et mauris vitae urna varius viverra. Fusce suscipit leo in ante. Duis lobortis justo. Morbi sed sem. In vulputate consectetuer eros. Etiam erat ipsum, blandit ut, nonummy quis, vestibulum at, lorem. Suspendisse metus augue, venenatis vitae, fermentum nec, dictum a, lorem. Duis aliquam pellentesque justo. Morbi dignissim nibh vitae arcu. Vestibulum ullamcorper porta nunc.

Pellentesque ut dolor. Donec imperdiet. Etiam volutpat diam a libero. Donec auctor, nisi in sodales mattis, metus lectus laoreet arcu, vel consectetuer nunc ante sed odio. Ut nec mi. Donec dictum facilisis leo. Nulla aliquam lacus at augue. Etiam sodales. Proin sit amet velit vel nunc tincidunt feugiat. Etiam feugiat. Sed ut sapien eget sapien bibendum imperdiet.