How to Wrap Text Around Irregularly Shaped Images Using Floating Divs?

How to Wrap Text Around Irregularly Shaped Images

Wrapping text around images is a common layout technique, but what if your image isn't a simple rectangle? Can you still create an elegant wrapping effect?

In this article, we'll explore a method proposed by Tory Lawson, which allows you to wrap text around irregularly shaped images by blocking off the shape's area with floating divs.

Step 1: Define the Wrap Area

Flip your image upside down and draw a bounding line where you want the text to end, taking into account a small padding for clearance. Use a grid system to ensure a consistent distance from the image's border.

Step 2: Create a Measurement List

Measure the width of the outline every 10 pixels and write down the x-coordinates on paper. This will guide the spacing of your blocking divs.

Step 3: Create the Markup and CSS

Define a wrapper div to contain the image and the blocking divs. Inside the wrapper, create spacer divs and set their widths according to the measurements you collected in Step 2.

<div>

#wrapper {
  width: 634px;
  height: 428px;
  display: block;
  background-image: url("headshot.jpg");
}

.spacer {
  display: block;
  float: right;
  clear: right;
}

p {
  display: inline;
  color: #FFF;
}

By following these steps, you'll be able to effectively wrap text around any irregularly shaped image, giving your design a unique and polished look. While there may not be a straightforward "text-wrap" option in CSS, this workaround provides a reliable and aesthetically pleasing solution.

The above is the detailed content of How to Wrap Text Around Irregularly Shaped Images Using Floating Divs?. For more information, please follow other related articles on the PHP Chinese website!