Image elements, on the web, are square. Which is fine in many situations, and suits the image content. But often that content is irregular or at least non-rectilinear in shape. Take, for example, a red ball against a transparent background. To our eyes, the content, the important visual information is actually circular. If we try to wrap text around it, the browser is unaware, and can only conform to the image element boundary.
There’s always more than one way to do it, but take a look at this method for wrapping text around non-square image content for web pages. It’s the same image file of a circle, but now the text appears to follow the contours of the visually important object, not the <img> element:
The two images are positioned using the CSS position property set to absolute. We can then place them where we want within the parent <div>. As you know, absolutely positioned elements act as if physically incorporeal, so that they cannot exert their existence, they can’t push other elements to the left or right. Additionally, they are set to a negative z-index to bring them behind the non-positioned text.
At this point, the text will simply appear over the top of the whole image.
Next, as demonstrated here, we add a whole bunch of <div>s, with varying widths, set in CSS to float: left and clear: left. Since they have no colouring, they’re invisible (I have, however, used a CSS outline rule to show you where they are without affecting layout). Since they have float: left, they sit on top of where the image is, causing text to route around it. Since it is clear: both, the next <div> is forced onto the line below.
(Alternatively, place the images as background images, although not all browsers support multiple background images)
You could also do this, with care, to wrap around image content with non-transparent backgrounds/environments. Say, a bowl of soup on a tablecloth- wrap the text around the bowl, over the tablecloth, making sure to use a contrasting text colour.
Categories