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>
<pre class="brush:php;toolbar:false">#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.