To wrap paragraph text around an image that extends beyond a card’s edge, float the image and use a negative outer margin. Add shape-outside for a curved contour. This tutorial builds a complete local example you can open in Safari on your Mac.

What makes text wrap around an overlapping image?

The image needs to participate in the paragraph’s float layout. CSS float places an element against one side of its container and lets adjacent text wrap alongside it. For this example, a right float leaves text flowing on its left and then beneath it. MDN: float.

Three choices control the result: the float creates the wrapping behavior, a negative right margin lets the image extend beyond the container, and shape-outside defines the contour that nearby text follows. Ordinary floats provide rectangular wrapping; a shape can make individual lines follow a circle. MDN: shape-outside.

Moving an image visually is insufficient. An absolutely positioned image occupies no space in normal flow, so surrounding elements behave as though it were absent. A translation changes the rendered position without rearranging normal document flow. These behaviors explain why an overlapping image can cover text when positioned with position: absolute or transform: translateX(...). MDN: position, MDN: Using CSS transforms.

The task here is deliberately specific: one circular image crosses the right edge of one text card, and the card’s paragraphs follow the circle’s left contour. The image and paragraphs belong to the same wrapping region.

Build a complete example on your Mac

In a plain-text code editor, create a file named overlap-wrap.html. Paste the complete document below, save it, and open it in Safari. The example includes its own abstract SVG image as a data URL, so there are no image files, packages, or build tools to install.

The floated image appears before the paragraphs it should affect. This placement matters because float positioning is constrained by content that occurs earlier in the document. Keeping the heading before the float also lets the heading occupy the card’s full text width. W3C: Visual formatting model.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Overlapping image and paragraph wrapping</title>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      padding: 32px 96px 32px 32px;
      background: #eef1f5;
      color: #243247;
      font: 18px/1.65 system-ui, sans-serif;
    }
    .card {
      display: flow-root;
      width: 100%;
      max-width: 640px;
      margin: 0 auto;
      padding: 24px;
      background: white;
      box-shadow: 0 0 0 1px #cbd3df;
      overflow: visible;
    }
    .card h2 {
      margin: 0 0 16px;
      font-size: 26px;
      line-height: 1.25;
    }
    .card p { margin: 0 0 16px; }
    .card p:last-child { margin-bottom: 0; }
    .art {
      display: block;
      float: right;
      width: 240px;
      height: 240px;
      margin: 0 -88px 16px 16px;
      border-radius: 50%;
      shape-outside: circle(50%) border-box;
      shape-margin: 16px;
    }
    @media (max-width: 760px) {
      body { padding: 16px; }
      .art {
        float: none;
        width: min(240px, 100%);
        height: auto;
        margin: 0 auto 24px;
        shape-outside: none;
      }
    }
  </style>
</head>
<body>
  <article class="card">
    <h2>Study A: circles and spacing</h2>
    <img class="art" width="240" height="240" alt=""
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Crect width='240' height='240' fill='%233a628b'/%3E%3Ccircle cx='90' cy='85' r='60' fill='%23b9d8eb'/%3E%3Ccircle cx='165' cy='170' r='45' fill='%238db5cc'/%3E%3C/svg%3E">
    <p>Panel A pairs a circular graphic with a continuous passage of
      sample text. Follow the right edge of this paragraph as each
      line approaches the curved outline. Near the widest part of
      the circle, the available space becomes narrower.</p>
    <p>Panel B continues the same passage with a second paragraph.
      The graphic extends into the outer gutter while the words
      remain inside the white card. As the contour curves inward,
      later lines can use more of the available width.</p>
    <p>Panel C provides enough additional text to show the transition
      below the graphic. Once the passage continues beyond the
      wrapping region, its lines return to the full content width.
      Resize the window to compare the desktop arrangement with
      the stacked layout used in a narrower window.</p>
  </article>
</body>
</html>

At a viewport wider than 760px, the intended result is a circular graphic extending into the right gutter, with paragraph lines following its left side. At 760px or narrower, the image becomes a centered block above the paragraphs. The breakpoint is an illustrative design choice; @media applies the enclosed declarations when its query matches. MDN: @media.

The sample graphic is decorative, so its image element uses alt="". If you replace it with a graphic that communicates information, provide an appropriate text alternative. WHATWG distinguishes decorative images from images whose information needs an equivalent in text. WHATWG: Requirements for providing text to act as an alternative for images.

How do you choose the overlap and text gap?

Start with the image’s position, then adjust the contour. A right float is placed using its margin box. In this example, the negative right margin places the image’s right edge 88px beyond the card’s content edge. The card has 24px of right padding, leaving a 64px overhang beyond its white background. These are derived dimensions for this example, measured in CSS pixels. W3C: Positioning the float.

Quantity Example value Calculation or purpose
Image width 240px Diameter of the displayed circle
Outward displacement from content edge 88px Magnitude of the negative right margin
Card padding 24px Space between content edge and background edge
Visible overhang beyond background 64px 88 − 24
Image width remaining inside content area 152px 240 − 88
Rectangular fallback reservation 168px 240 − 88 + 16 including left margin

For your own layout, calculate the negative margin’s magnitude as the desired overhang plus the container’s right padding. For example, a 40px overhang with 24px padding calls for a right margin of -64px. Recheck the remaining text width whenever you enlarge the image or reduce the container width.

The circular version uses shape-outside: circle(50%) border-box so that its geometry follows the square image box. Explicitly choosing border-box is useful here because the asymmetric margins change the margin box. Without an explicit reference box, a basic shape defaults to margin-box. MDN: Basic shapes with shape-outside.

shape-margin: 16px adds space around the wrapping contour. The positive left margin supplies room for that gap on the text-facing side. Shapes, including their shape margins, are clipped to the float’s margin box; increasing shape-margin alone cannot extend the wrapping area indefinitely. The negative right margin also clips the shape on the outward side, where this example has no paragraph text. W3C: CSS Shapes Module Level 1.

For a rectangular image, change border-radius to 0, shape-outside to none, and shape-margin to 0. Keep the float and margins. That gives straight-sided wrapping with the same outward placement. Removing only the shape while retaining the circular crop leaves a circular picture with rectangular text clearance.

Which container boundaries affect wrapping?

The card uses display: flow-root to establish a block formatting context that contains its float vertically. This lets the card’s height account for the image even when the text is short. It also keeps this wrapping region independent of external floats. MDN: Block formatting context.

Keep the paragraphs in ordinary block flow within that region. If the image is a direct flex or grid item, its float will not provide this paragraph-wrapping arrangement. Likewise, giving a separate paragraph wrapper its own block formatting context excludes the external float from that wrapper’s contents. An outer grid may position the entire card; the card’s interior can still use flow layout. MDN: Block formatting context.

Check clipping separately. The example leaves overflow visible so the overhang can be drawn. Using overflow to contain floats can introduce clipping or scrollbars; flow-root provides float containment without requiring that choice. Inspect enclosing components too if the image disappears precisely at an ancestor’s edge. MDN: Containing internal floats.

CSS Shapes also has a directional boundary: a right float permits wrapping on its left, and a left float permits wrapping on its right. A single float cannot create text passages on both sides of a centered image. For this task, an edge float is the supported arrangement. W3C: CSS Shapes and float behavior.

Can you use this approach with Tailwind CSS?

Yes. In an existing Tailwind project, float-right produces float: right, while float-none removes the float. Tailwind supplies these utilities; the browser still performs the text layout. Tailwind CSS: float.

For the contour declaration, Tailwind’s arbitrary-property syntax can express [shape-outside:circle(50%)_border-box] and [shape-margin:16px]. The underscore represents the space before border-box. These are class-name fragments for an already configured Tailwind project, not a replacement for the complete document above. Preserve the same dimensions, margins, container layout, and narrow-window reset when translating it. Tailwind CSS: Adding custom styles.

How do you diagnose wrapping that looks wrong?

Use the local example as a baseline, then introduce your existing styles one change at a time. This sequence checks the conditions that determine the layout:

  1. Confirm rectangular wrapping first. Temporarily set shape-outside: none. If text still runs beneath the picture, inspect whether the image is floated, absolutely positioned, or a direct flex/grid item.
  2. Check document order. Place the float before the paragraphs that should wrap around it.
  3. Check the wrapping region. Keep the float and paragraph content within the same block formatting context; remove an unnecessary independent context from the paragraph wrapper.
  4. Check the contour. Restore the circle and its explicit border-box reference. Confirm that the displayed image is square before applying a circular crop.
  5. Check the gutter. Increase the viewport width and look for clipping on the card or its ancestors. Confirm that the page reserves enough outer space for the overhang.
  6. Check the narrow layout. Resize through the example’s breakpoint and verify that both the float and negative margin reset.

These checks follow the documented rules for float placement, formatting contexts, and shape reference boxes. Avoid adding manual line breaks to repair individual lines; they would tie the passage to one particular window size.

MDN identifies shape-outside as widely available, while noting that support can vary for parts of its syntax. This example uses the documented circle() form. Compare the page in the Mac browsers you intend to support, and assess clearance and readability rather than requiring identical line endings. If the shape declaration is unavailable, the float retains rectangular wrapping. MDN: shape-outside.

For the finished layout, choose the image size and overhang together, preserve enough width for the passage, and keep the stacked fallback. Once those dimensions work, use the contour to refine the spacing around the image. This gives you a paragraph that can reflow when its text or available width changes.

Sources