Flowing Text Around an Image: A Complete Guide for 2026

blog_related_media

blog_topic

blog_related_activities

blog_niche

blog_related_tips

unique_blog_element

You drop an image into a polished article, and the layout suddenly looks unfinished. The text stops too early, a blank column opens up beside the image, and the page feels more like a draft than a publication.

That gap matters. Readers notice when a page looks awkward, even if they can't name the problem. Flowing text around an image is one of those small layout decisions that changes how professional the whole piece feels.

The frustrating part is that the answer depends on where you publish. A hand-coded site gives you one set of tools. Microsoft Word and Google Docs give you another. Notion barely gives you the feature at all, so you have to fake the effect with layout choices. If you're also cleaning up assets before publishing, Postiz helps fix image errors when dimension problems stop images from displaying correctly on social and content workflows.

Why Flowing Text Around an Image Matters

A rectangular image dropped between paragraphs usually creates one of two problems. It either interrupts reading with a hard visual break, or it leaves a large dead zone that makes the page feel sparse.

Text wrap solves both. It lets the image participate in the composition instead of sitting on top of it like an afterthought. That changes pacing, especially in long-form articles where every visual element affects how far a reader keeps going.

For content marketers, this isn't just decoration. A better wrap can make a page feel more editorial, more deliberate, and easier to scan. The image can support the argument instead of competing with it.

The right method depends on the platform:

On the web: CSS float gives you the dependable baseline.

For richer visual layouts: CSS shape-outside lets text follow the contour of a subject instead of a box.

In documents: Word and Google Docs handle wrapping through built-in image controls.

In Notion: you can't create true text wrap, so layout simulation becomes the practical path.

No-code users run into this issue faster than developers do. The writing experience on modern tools is simple, but the layout controls are often limited. That's why the key skill isn't just knowing the ideal design technique. It's knowing which compromise still looks intentional on the platform you're using.

The Classic Web Method Using CSS Float

float is still the foundation. It isn't flashy, but it works almost everywhere and gives you predictable text wrapping around a rectangular image.

If you want the fastest way to flow text around an image on a website, start here.

Float the image left or right

A floated image leaves the normal document flow and allows inline content, including paragraph text, to wrap beside it.

<article class="post">
  <img src="author-photo.jpg" alt="Portrait of the author" class="wrap-left">
  <p>Your text starts here and flows beside the image.</p>
  <p>As the paragraphs continue, the browser wraps them around the image box.</p>
</article>

.wrap-left {
  float: left;
  width: 240px;
  margin: 0 20px 16px 0;
}

For the opposite side:

.wrap-right {
  float: right;
  width: 240px;
  margin: 0 0 16px 20px;
}

A few practical rules matter more than the syntax:

Set a width: Without a defined width, the image may take more room than you expect.

Add margin: Text pressed directly against an image looks cramped.

Use meaningful alt text: The layout may be visual, but the image still needs semantic value.

If you need a refresher on inserting and styling images in markup, Feather has a useful walkthrough on how to display a picture in HTML.

Why float still works

float has limits, but it solves common editorial layouts cleanly. Blog posts, side portraits, product shots, and pull-image introductions all work well when the image shape is basically rectangular.

This method also degrades predictably. If your design system is simple, that consistency is often more important than visual novelty.

Clear the float so the layout doesn't collapse

The biggest mistake isn't floating the image. It's forgetting to clear it afterward.

When a floated element sits inside a container, the parent can collapse in height because the float no longer contributes to normal flow. Then the next section slides upward and the page starts to look broken.

A common fix is a clearfix:

.post::after {
  content: "";
  display: table;
  clear: both;
}

You can also clear a specific element below the wrapped section:

.next-section {
  clear: both;
}

Use the clearfix when the wrapped image is part of a larger content block. Use clear: both; when you want a clean stop before the next module.

Where float falls short

A floated image always wraps as a rectangle. Even if the visible subject is a person, a plant, or a product on a transparent background, the text still respects the image box, not the subject's silhouette.

That boxy edge is fine for many pages. It just won't produce the magazine-style effect designers reach for in more expressive editorial work.

Here's a quick comparison:

Method	Best for	Main limitation
`float`	Standard blog posts and simple content pages	Wrap shape is always rectangular
`float` with margins	Readable article layouts	Doesn't follow irregular image contours
cleared floats	Stable section boundaries	Adds layout housekeeping

If you publish often, the best float layouts are boring in the right way. They don't surprise the browser, and they don't surprise you.

Creating Magazine-Style Layouts with CSS Shape-Outside

If float is the workhorse, shape-outside is the editorial tool. It lets text wrap around the actual contour of an image instead of its rectangular box, which is how you get the magazine look people often try to fake with spacing hacks.

According to Caleb Hearth's guide to flowing text around images, CSS Shapes with shape-outside: url() enables precise text wrapping around irregular image contours, requires a floated element and an image with an alpha channel like a PNG, has over 95% global browser support, and falls back gracefully to a rectangular float in older browsers.

That combination is what makes it practical. You get the advanced layout in supported browsers, and you don't completely break the page elsewhere.

The setup that actually works

The cleanest approach uses a transparent PNG. The transparent background defines the contour the text follows.

<article class="feature">
  <img src="runner-cutout.png" alt="Runner in motion" class="shape-wrap">
  <p>Long-form article text begins here...</p>
  <p>Additional paragraphs continue around the subject silhouette...</p>
</article>

.shape-wrap {
  float: left;
  width: 320px;
  shape-outside: url("runner-cutout.png");
  shape-margin: 10px;
  margin: 0 20px 16px 0;
}

Three details matter:

The element must be floated. shape-outside won't do anything on a non-floated element.

The image needs transparency. JPG won't give you the alpha channel needed for contour-based wrapping.

You need breathing room. The same source notes that using shape-margin of at least 8px helps legibility.

Why this looks better than float alone

A rectangular wrap tells the browser, "respect the box." A shape-based wrap says, "respect the subject."

That difference changes the page considerably. A portrait feels integrated into the story. A product image stops wasting negative space. A feature article gets movement without adding more visual clutter.

For editorial brands, this is one of the few CSS techniques that can make a web page feel closer to print design.

The mistakes that break it

This technique is powerful, but less forgiving than float. The source above notes a 40% failure rate when the container height is insufficient, which can cause text overlap. A practical mitigation is min-height: 300px; when the layout needs more room to reflow.

Low-contrast edges also create trouble. The same source notes 25% of issues come from low-contrast edges, and readability scores dropped 15% without shape-margin greater than 8px in WCAG 2.1 contrast analysis.

Use this checklist before blaming the browser:

Prepare the asset well: Remove the background cleanly in Photoshop or GIMP.

Protect the text edge: Add shape-margin so letters don't crash into the subject.

Give the container room: If the article block is too short, the text has nowhere sensible to go.

Expect fallback behavior: Older browsers will still wrap as a rectangle, which is acceptable if your spacing is solid.

When to choose shape-outside

Use it when the image is part of the storytelling. Skip it when the image is purely informational or when the article depends on rigid, utility-first layout consistency.

This is also where no-code teams need restraint. If your publishing stack doesn't let you control CSS cleanly, trying to imitate this effect with manual spacing usually creates more problems than it solves. A poor imitation looks worse than a clean rectangle.

How to Wrap Text in Word and Google Docs

Documents have their own logic. You aren't writing CSS, but you are still making layout decisions that affect readability and polish.

The good news is that both Microsoft Word and Google Docs support text wrapping. The bad news is that the settings are easy to miss, and the wrong option can make your page jump around when you edit nearby text.

In Microsoft Word

Word gives you several wrap modes, but three are typically sufficient:

Square: Text wraps around the image's box. This is the safest default.

Tight: Text hugs the visible object more closely when Word can detect its edges.

In Front of Text or Behind Text: Useful for special layouts, but risky for normal documents because text can become hard to read or hard to edit.

A practical workflow in Word looks like this:

Insert the image.

Click the image so Word shows layout controls.

Open Wrap Text.

Choose Square first.

Drag the image into position and adjust the margin if needed.

If you're creating formal documents after the layout work, RewriteBar's business letter templates are a useful reference for keeping the rest of the Word formatting clean and professional.

In Google Docs

Google Docs is simpler, but also more limited. After inserting an image, click it and you'll see layout choices directly in the toolbar area.

The useful settings are:

In line: The image behaves like a character in the sentence. This is not text wrap.

Wrap text: The standard choice for most reports and drafts.

Break text: Text stays above and below, not beside.

The important adjustment is the image margin. If the wrapped text feels crowded, increase the margin rather than nudging the image with spaces or line breaks. Manual spacing is what turns a clean document into a fragile one.

A quick visual walkthrough helps if the menu labels feel buried:

Which option to pick

For most marketing documents, proposals, ebooks, and internal briefs, use this rule of thumb:

Tool	Best default	Use with caution
Word	Square	In Front of Text, Behind Text
Google Docs	Wrap text	Manual spacing tricks

Word is better when you need finer control. Google Docs is better when collaboration matters more than precision. In both tools, the cleanest result usually comes from choosing a simple wrap mode and resisting the urge to over-position everything.

Simulating Text Wrap in Notion and Feather

Notion doesn't support true text wrap around images. You can place images between blocks, inside columns, or alongside callouts, but you can't make paragraph text flow around an image contour the way you can on a custom website.

That's the constraint. The useful question is what still looks good inside it.

What Notion can do well

Notion is strong at structured writing and weak at fine editorial layout. That means you shouldn't try to recreate print design exactly. Instead, build a page that suggests balance.

Three patterns work better than the rest:

Two-column sections: Put the image in one column and a short text block in the other. This creates side-by-side rhythm without pretending it's wrap.

Stacked image with short paragraphs: Place the image between compact paragraph groups so the white space feels deliberate.

Callout-supported layouts: Use a callout or quote block near the image to create visual weight opposite the media.

These aren't substitutes for CSS. They're editorial workarounds.

The best no-code simulation

The strongest Notion layout usually comes from controlling paragraph length. Long uninterrupted text next to a standalone image makes the absence of wrap obvious. Shorter paragraph blocks make the composition feel intentional.

A practical Notion pattern looks like this:

Start with a short introductory paragraph.

Add a two-column block.

Place the image in the narrower column.

Put one to three compact paragraphs in the wider column.

Return to full-width text after the visual moment has done its job.

That sequence mimics the pacing effect people want from flowing text around an image, even though the text isn't wrapping.

Where no-code users go wrong

The usual mistake is trying to brute-force a layout with empty blocks, spacer text, or oddly cropped images. It may look acceptable on one screen width, then fall apart on another.

Another common issue is using a very tall image beside a long text block. In Notion, that often creates awkward imbalance rather than elegance. A shorter image or a more compact copy block usually reads better.

Here's a simple decision guide:

Goal	Better Notion approach	Avoid
Side-by-side emphasis	Columns with short text	Empty blocks for spacing
Editorial feel	Alternating image and paragraph rhythm	Huge image dropped mid-essay
Visual balance	Callouts and captions	Oversized media with no supporting structure

Publishing beyond Notion

When the writing happens in Notion but the published result needs more design control, the workflow changes. You keep Notion for drafting and structure, then publish through a system that gives you more control over presentation.

If you're setting up that kind of workflow, Feather's guide on how to publish a site is useful for understanding the handoff from writing environment to live site.

That's the practical bridge for no-code teams. Notion remains the editor. The published site handles the front-end expectations readers judge. For content operations, that's often the difference between a page that feels like internal documentation and one that feels ready for an audience.

Responsive Design and Accessibility for Text Wrapping

The desktop version of a wrapped image can look sharp and still be the wrong choice. Mobile screens tighten everything. What felt elegant on a laptop can become cramped, unstable, or hard to read on a phone.

That matters for both usability and search visibility. As noted in Theosoti's discussion of wrapping text around images, the performance of CSS shape-outside can affect Cumulative Layout Shift, and while browser support is over 95%, rendering performance on content-heavy sites or mobile devices should be monitored because search ranking systems heavily value page speed and visual stability.

Mobile first beats desktop cleverness

The easiest mistake is designing the wrap for wide screens and assuming it will scale down gracefully. Often it won't.

A safer pattern is to disable or soften the wrap on smaller viewports. Let the image become full-width or centered above the text rather than preserving a tight side wrap that squeezes line length.

Use this approach when testing:

Check narrow screens first: If the paragraph width becomes too thin, remove the side wrap.

Watch visual stability: Late-loading images can shift surrounding text in ways that feel sloppy.

Reduce decorative ambition on mobile: The effect should support reading, not compete with it.

If you want broader layout guidance around small screens and flexible structures, this guide to responsive web design tips is a practical companion.

Accessibility matters more than the visual trick

Wrapped text can remain accessible, but only if the document order stays logical. Screen readers follow the HTML structure, not the visual curve on the page.

That means the image should appear where it makes sense in the source, and the alt text should describe the image's purpose rather than the wrap effect. Decorative images can use empty alt text when appropriate. Informative images need concise, useful descriptions.

For a broader accessibility checklist, Feather's article on website accessibility best practices covers the fundamentals that matter beyond this single layout technique.

A useful benchmark from print tools

Professional publishing software handles this category of problem with more dedicated controls than the web typically does. Adobe InDesign, for example, includes subject-aware wrapping features intended for layout production rather than browser rendering.

That contrast is useful because it highlights the trade-off. The web can create expressive wrapping effects, but it does so in a live, responsive environment where performance, readability, and device variation all matter at once.

For publishers focused on SEO, the rule is simple. If the wrap improves the reading experience without hurting stability, keep it. If it introduces friction, the rectangular layout wins.

Frequently Asked Questions

A few issues come up again and again when people try flowing text around an image. Most of them come down to platform limits, image prep, or choosing the wrong technique for the job.

Quick Answers to Common Text Wrap Problems

Question	Quick Answer
Why isn't my text wrapping around the image in CSS?	The image usually isn't floated, or the width hasn't been set.
Why doesn't `shape-outside` do anything?	It needs a floated element, and the shape source must define a usable contour such as a transparent PNG.
Can JPG files work for contour-based wrapping?	Not for alpha-channel-based wrapping. A transparent image format is the practical choice.
Why does my text overlap the wrapped image area?	The container may not have enough height for the text to reflow cleanly.
Can Notion do real text wrap?	No. It can only simulate the effect with columns and layout structure.
Is there an automatic tool for complex image wrapping?	In professional publishing, yes. Adobe InDesign's Detect Subject feature can automate text wrapping with 92% first-pass accuracy on complex subjects according to Adobe's InDesign text wrap documentation.
Should I always use fancy wrapping on article pages?	No. Use it when it improves reading flow. Skip it when it makes the layout tighter, slower, or harder to maintain.

What usually works best

For most websites, standard float is still the safest starting point. It handles common blog and editorial layouts without asking much from the browser or your CMS.

If you want the richer magazine effect, prepare the asset properly and test the result on smaller screens before publishing. The design only succeeds if the page still reads cleanly.

If you publish from Notion and want your content site to look more polished than Notion's default layouts allow, Feather is worth a look. It helps teams turn Notion into an SEO-focused publishing workflow with a cleaner front end, faster publishing, and better control over how articles appear once they're live.