Similarly to the previous recipe, we are adding an <img> tag, followed by a <p> tag, in a wrapping element. This time, the wrapping HTML element is a <div> in both cases.
The first image is floated right. The second image is floated left. To make the text follow the circular outline of the image, we use custom CSS classes, with their styles set in main-03-07.scss. To prevent paragraph text from touching the rounded image, we use the margin-right or the margin-left CSS property, based on where the image is floated.
The CSS shapes W3C specification can be found at https://www.w3.org/TR/css-shapes/. This CSS property allows for creation of such layouts that were previously only possible in print. More information on the topic ...
