How To Wrap Text Around An Image In WordPress

You set an image to align left, and the paragraph below it refuses to budge. Knowing how to wrap text around an image in WordPress takes about two clicks once you find the right control, though making that wrap hold up on a 375px phone screen is the harder half of the job.

This guide covers every method that works, plus the fixes for when they quietly stop working:

• Block editor and Classic Editor alignment
• CSS float, margin, and clear rules
• The Media and Text block as an alternative
• Mobile breakpoints, image sizes, and broken wraps

By the end, your floated images will behave at every screen width.

What Is Text Wrapping Around an Image in WordPress

Text wrapping in WordPress is the layout behavior where paragraph text flows along one side of an image and then continues beneath it. The effect comes from the CSS float property, applied through the alignment classes WordPress adds to the image markup.

Wrapping and alignment get used as synonyms constantly. They are not the same thing.

Alignment positions the image inside its container. Wrapping is what happens to the text next to it.

An image set to alignleft or alignright floats out of the normal document flow, so the following paragraph rises up to fill the empty space. An image set to aligncenter or alignnone stays a block-level element, and text simply stacks above and below it.

That is the whole mechanism. No plugin required, no builder needed.

The styles that produce the effect live in two places depending on your theme:

• Classic themes: .alignleft and .alignright rules sit in the theme’s style.css file
• Block themes: the Image block ships wrapper classes like wp-block-image alignleft, with layout values resolved through theme.json

The HTML WordPress writes wraps the image in a figure element, not a bare img tag. The float is applied to the figure, which is why a caption travels with the image instead of breaking away from it.

Floats remain everywhere despite being old technology. Web Almanac data puts float declarations on 91% of pages, and the clearfix class still appears on 22% of websites.

What Are the Image Alignment Options in WordPress

WordPress ships 6 image alignment values: left, right, center, none, wide, and full. Only left and right produce text wrapping. Wide and full alignment require explicit theme support and stretch the image beyond the content column instead of floating it.

Wide and full only appear in the toolbar when the theme declares support. Block themes handle this through the layout settings in theme.json, while older classic themes use addthemesupport('align-wide') in functions.php.

Centering is the one alignment people confuse with a layout choice rather than a wrapping choice. If you want the image on its own line with text above and below, the approach for centering images in WordPress is a different job entirely.

Alignment options also shift depending on where the Image block sits. Drop an image inside a Columns block or a Group block and the float still applies, but it floats within that container’s width, not the full content width.

That container behavior causes real trouble in block themes. Contributors have logged Gutenberg issues showing floated images ignoring the contentSize value from theme.json and drifting toward the viewport edge instead.

How to Wrap Text Around an Image in the Block Editor

Insert the Image block directly above the paragraph you want wrapped, select the image, then click the align button in the block toolbar and choose Left or Right. WordPress adds the alignleft or alignright class, and the paragraph below flows beside the image.

The order matters more than anything else here. An Image block placed after the paragraph has nothing to float against, so nothing wraps.

The four steps, start to finish:

1. Click the + inserter and add an Image block, or type /image and hit enter
2. Upload a file or pick one from the Media Library
3. Select the image, open the align dropdown in the toolbar, choose Left or Right
4. Add a separate Paragraph block underneath and start typing

Resize using the drag handles or the width field in the sidebar. I set width as a percentage rather than pixels whenever the theme allows it, because a 400px image on a 375px phone screen leaves the text nowhere to go.

One thing worth checking: the editor canvas and the published page do not always agree. Theme stylesheets load differently in the two contexts, so confirm the wrap on the front end before you call it done.

How Captions Change the Wrap

Captions inherit the float. The figcaption element sits inside the floated figure, so it takes the image width and moves with it.

A long caption on a narrow image stretches the figure taller, and the wrapped paragraph has to clear that extra height. Keep captions to a single line when the image is under 300px wide.

How to Remove Text Wrapping

Select the image, open the align dropdown, pick None. Done in two clicks.

For stubborn cases where an old class is stuck in the markup, open the Code Editor with Ctrl+Shift+Alt+M (Cmd+Shift+Option+M on Mac) and delete alignleft or alignright from the block comment by hand.

How to Wrap Text Around an Image in the Classic Editor

Click Add Media, upload or select the image, then set Alignment to Left or Right in the Attachment Display Settings panel before inserting. The Classic Editor writes the alignleft or alignright class into the img tag, and TinyMCE flows the surrounding text around it.

The Classic Editor plugin sits at 9 million active installations on WordPress.org, with version 1.7.0 shipping in May 2026. Automattic has committed to maintaining it through 2026 and has extended that commitment annually since 2018.

So this workflow is not going anywhere.

To change alignment after insertion: click the image once, then click the pencil icon that appears. The Image Details modal opens with the same alignment control plus size and caption fields.

Switch to the Text tab and you will see the markup WordPress generated:

<img class="alignleft size-medium wp-image-1234" src="..." width="300" height="200" />

The default toolbar has no spacing controls at all, which is its biggest gap. Advanced Editor Tools (formerly TinyMCE Advanced) fills that in, and with 2 million active installations and a 4.3 out of 5 rating, it is the one most Classic Editor holdouts reach for.

The same toolbar handles paragraph alignment, so if you want justified body copy in WordPress alongside a floated image, both controls sit in the same row.

How to Add Space Between an Image and Wrapped Text

Add margin to the side of the image that faces the text. A value of 1.5em on the text-facing side and 1em on the bottom prevents the wrapped paragraph from touching the image edge, which is the single most common complaint after a float starts working.

The rule most themes should carry:

.alignleft { float: left; margin: 0 1.5em 1em 0; }

.alignright { float: right; margin: 0 0 1em 1.5em; }

Classic themes almost always include something like this. Stripped-down block themes frequently do not, which is why a fresh install of a minimal theme produces text jammed flush against the image.

Margin and padding behave differently once a background color enters the picture. Padding sits inside the colored box and pushes the image inward. Margin sits outside and creates real breathing room in the layout.

Tight wrapping also reads worse when the paragraph itself is cramped. Adjusting line height in WordPress by even 0.2 makes a floated image feel less like it is crowding the copy.

How to Wrap Text Around an Image With CSS Float

Apply float: left or float: right to the image, add a margin on the text-facing side, then use clear: both on the element that should sit below the wrap. This is the manual method for developers and for cases where the editor UI is overridden by a theme or builder.

Three properties do the entire job:

• float: pulls the image out of normal flow and pins it left or right
• margin: creates the gap between image edge and text
• clear: forces a later element to start below the floated image

Floated children do not expand their parent container. If the wrapper collapses to zero height, add a clearfix:

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

For non-rectangular wrapping, shape-outside flows text around a circle, an ellipse, a polygon, or the alpha channel of a transparent PNG. It only works on an element that already has a float, which catches people out constantly.

.alignleft { float: left; shape-outside: circle(50%); }

Chrome, Firefox, Safari, and Edge all support it. Opera does not, so factor that into your browser compatibility testing if Opera traffic matters to your audience.

Place the CSS in Additional CSS for a quick site-wide rule, or in a child theme stylesheet if the project is under version control.

When to Use Flexbox or Grid Instead

Neither one wraps text. Flexbox and Grid place elements into tracks. Text inside a flex item stays inside that item and never flows underneath a sibling.

Web Almanac figures show flex declared on 74% of pages against 36% for grid, and both keep climbing while floats hold steady as legacy code.

Use a grid-based layout for side-by-side blocks of equal height. Use float when you want genuine magazine-style text flow around an image.

How to Use the Media and Text Block Instead of Wrapping

The Media and Text block places an image in one column and text in the adjacent column. Text never flows beneath the image, which is the core behavioral difference from float-based wrapping. Media width adjusts between 15% and 85%, with 50% as the default.

Settings that matter in the sidebar:

• Stack on mobile: enabled by default, and leaving it on is the right call almost every time
• Crop image to fill: forces the media to fill the full column height, with a focal point picker for framing
• Vertical alignment: top, middle, or bottom, set from the block toolbar

When the block stacks, the image always lands above the text regardless of which side it occupied on desktop. The University of Wisconsin theme documentation flags this as the reason to pick Media and Text over Columns for alternating content rows, since Columns does not preserve that reading order.

Reach for this block when the text is short, when you want equal-height rows, or when the section functions as a hero band. Reach for float wrapping when you have 4 or 5 paragraphs and want them to flow naturally around a smaller image.

The built-in stacking behavior is also why this block holds up better under responsive design constraints than a hand-rolled float. No media query needed.

How to Wrap Text Around an Image in Elementor, Divi, and Beaver Builder

None of the three builders ship a native text wrap toggle on their image widget. Wrapping happens one of two ways: place an inline image inside a text module, or add a float rule through the builder’s custom CSS panel.

This surprises people who assume a paid builder covers everything the block editor covers. It does not.

Elementor is detected on 32.67% of WordPress sites in the April 2026 HTTP Archive crawl, ahead of wpBakery at 8.52% and Divi at 5.72%. So this gap affects a very large slice of the web.

The reliable Elementor method: drop a Text Editor widget, click Add Media inside it, set alignment left or right in the media modal. The image becomes part of the text content instead of a separate widget, so the float has something to wrap.

Elementor’s free tier locks the Custom CSS field behind Pro, which has an estimated 2 to 3 million sites on it according to Colorlib. Free users add the rule through Additional CSS in the Customizer instead.

Divi behaves the same way. The Text module accepts an inline image with an alignment class, and Elegant Themes documents the Advanced tab as the place for per-module float rules.

Beaver Builder has the most honest implementation of the three. The Photo module carries a float setting directly in the Style tab, though it floats the module itself, so the text still has to live in a separate module positioned after it.

Builder-generated wrappers are the real problem across all three. Divs like elementor-widget-container and etpbtextinner sit between your image and the paragraph, and a float cannot escape a wrapper it does not share with the text.

Beaver Builder holds roughly 0.4% global market share with about 175,000 active users, a small base but one that skews technical. Its clean HTML output is exactly why float rules tend to behave there.

How Wrapped Text Behaves on Mobile Devices

A floated image keeps floating at every screen width unless CSS says otherwise. On a 375px phone viewport, a 400px image leaves the wrapped paragraph a 40-character column that reads terribly. Dropping the float below a breakpoint fixes it.

Mobile accounted for 64.35% of global web traffic in July 2025 according to StatCounter data compiled by Soax. Wrapped layouts that only work on desktop are failing most of your audience.

The three problems that show up on phones:

• Fixed pixel widths: a 400px float on a 375px screen squeezes text into an unreadable strip
• Orphaned captions: the figure stays narrow while the caption wraps to 4 lines
• Widowed paragraphs: two words wrap beside the image, the rest drops below

The standard fix is a media query that kills the float on small screens:

@media (max-width: 600px) { .alignleft, .alignright { float: none; display: block; margin: 0 auto 1em; } }

WordPress uses 782px as its own admin breakpoint, but 600px maps better to actual content behavior. Below that width, side-by-side text stops being readable regardless of how wide the image is.

Percentage widths beat pixel widths. Set the image to 30% or 40% and it scales with the viewport instead of fighting it.

Theme defaults already cover part of this. Most themes carry max-width: 100% and height: auto on images, which stops overflow but does nothing about the float itself.

Test in two places before publishing: the block editor’s Preview menu (Desktop, Tablet, Mobile) and Chrome DevTools device mode at 375px and 414px.

A mobile-first approach flips the logic entirely. Write the stacked layout as the default, then add the float inside a min-width query for larger screens. Fewer overrides, less specificity mess.

How Image Size and File Format Affect Wrapped Layouts

A wrapped image sits inline with body content, so its dimensions directly control how much text column remains and whether the paragraph jumps during load. WordPress generates 3 resized copies of every upload, and choosing the right one prevents both problems.

Medium is the one you want in nearly every case. A 300px float against a 720px content column leaves roughly 400px of readable text, which lands close to the 50 to 75 character line most typography guidance targets.

Need a size between 300 and 768? Register one with addimage_size(), which lives in the theme’s functions file. Worth knowing how to edit functions.php in WordPress before you go that route, since a syntax error there takes the whole site down.

Layout shift is the other half of this. WordPress 5.5 started back-filling width and height attributes on img tags precisely because missing dimensions cause the page to jump, per the Make WordPress Core dev note.

The 2025 Web Almanac found 62% of mobile pages still carry at least one image without explicit dimensions, down from 66% in 2024. Unsized media remains the number one cause of Cumulative Layout Shift.

The payoff for getting it right is measurable. 81% of mobile pages hit a good CLS score in the 2025 Web Almanac, while only 62% manage a good LCP, so layout stability is the easier win of the two.

Format support timeline:

• WebP: supported since WordPress 5.8, roughly 30% smaller than an equivalent JPEG
• AVIF: supported since WordPress 6.5, up to 50% smaller than JPEG at matching quality

WebP reached 12% of all web images in the 2024 Web Almanac, a 34% jump over 2022. Slow adoption for a format every major browser handles.

Transparent PNGs matter for one specific trick. The shape-outside property can read an alpha channel and flow text around the actual subject instead of a rectangle, which is a real reason to keep PNG in rotation despite the file size. If you are weighing the difference between SVG and PNG, note that SVG works with shape-outside only through a defined shape function, not alpha detection.

Aspect ratio deserves a mention too. A tall portrait image floated at 300px wide can run 450px tall, and the wrapped paragraph has to clear all of it before anything sits full width again.

Why Text Wrapping Breaks in WordPress and How to Fix It

Text wrapping fails for 5 identifiable reasons: missing alignment CSS in the theme, image and paragraph sharing one block, a parent container cancelling the float, cached stylesheets serving old rules, and page builder wrappers isolating the image.

Theme and Markup Causes

Missing CSS is the most common one. Stripped-down block themes frequently ship without .alignleft and .alignright declarations, so the class lands in the markup and does nothing.

Inspect the image in DevTools. If the class is present but no float rule appears in the computed styles, your theme is the culprit, not the editor.

Persistent styling failures across multiple elements usually point to a broader WordPress theme error rather than an image-specific bug.

Container and Builder Causes

A parent with display: flex or overflow: hidden cancels the float outright. Flex items do not allow siblings to wrap around them, full stop.

Page builder wrapper divs cause the same effect through different means. When Elementor or Divi puts the image and the paragraph in separate containers, there is no shared parent for the text to flow within.

Block themes add their own version of this. Contributors have logged Gutenberg tickets showing floated images ignoring the contentSize value and drifting toward the browser edge.

Caching and Delivery Causes

Change your CSS, see nothing change, blame the CSS. Nine times out of ten it is the cache.

LiteSpeed Cache and W3 Total Cache each sit above 1 million active installations, and WP Rocket runs a paid-only model at $59 per year. All three will happily serve a stylesheet from before your edit.

Purge the plugin cache, then hard refresh with Ctrl+Shift+R. If the image still fails to appear at all rather than failing to wrap, that is a separate problem covered under WordPress images not showing.

The diagnostic order that saves time:

1. Confirm the alignleft or alignright class exists in the markup
2. Confirm a float rule is loading for that class
3. Confirm nothing later in the cascade overrides it
4. Confirm the parent container is not flex, grid, or overflow hidden
5. Clear every cache layer and retest in a private window

Run it in that order every time. Skipping straight to step 5 because caching is the usual suspect wastes more time than it saves.

FAQ on How To Wrap Text Around An Image In WordPress

Why will my text not wrap around an image in WordPress?

Three causes account for nearly all cases: the image and paragraph sit in the same block, the theme has no alignleft or alignright CSS, or a parent container using flex or overflow cancels the float.

Do I need a plugin to wrap text around an image?

No. The align control in the Image block toolbar handles it natively. Plugins only become useful when you want spacing presets or extra formatting buttons, which is what Advanced Editor Tools adds to the Classic Editor.

How do I put text next to an image without touching CSS?

Insert the Image block above your paragraph, select it, then choose Left or Right from the align dropdown. Keep the paragraph in its own separate block. WordPress writes the float class for you.

What is the difference between the Image block and the Media and Text block?

A floated Image block lets text flow beside it and then continue underneath. The Media and Text block creates two fixed columns, so text never runs below the image at any length.

How do I add space between an image and the wrapped text?

Add margin on the side facing the text. Roughly 1.5em on that side and 1em on the bottom works. Put the rule in Additional CSS or your child theme stylesheet.

Why does my wrapped image break on mobile devices?

The float stays active at every width. A fixed 400px image on a 375px viewport crushes the text column. Drop the float inside a media query below 600px and set the image to display block.

Can text wrap around a circular or irregular image?

Yes, using shape-outside with a circle, ellipse, polygon, or the alpha channel of a transparent PNG. The element still needs a float applied first. Chrome, Firefox, Safari, and Edge all support it.

Which image size should I pick for a wrapped image?

Medium, at 300px maximum, in almost every case. Large at 1024px leaves almost no readable text column beside it. Percentage widths between 30% and 40% scale better across screen sizes.

How do I stop text from wrapping around an image?

Select the image and choose None from the align dropdown. For markup with a stuck class, open the Code Editor with Ctrl+Shift+Alt+M and delete alignleft or alignright by hand.

Does text wrapping work in Elementor and Divi?

Not through the image widget. Add the image inline inside a Text Editor or Text module instead, or write a float rule in the builder’s custom CSS panel. Wrapper divs frequently block inheritance otherwise.

Conclusion

Once you know how to wrap text around an image in WordPress, the rest is maintenance. Everything depends on one habit: keep the image and the paragraph in separate blocks so the float has something to flow against.

Build yourself a default and stop rebuilding it post by post. Medium size, alignright, 1.5em of margin on the text-facing side, float dropped below 600px.

Save that combination as a reusable block pattern.

Two checks before you hit publish:

• Inspect the figure` element in DevTools and confirm the float rule is actually loading
• Purge every caching layer, then view the live page in a private window

Floats are old CSS. They still beat a two-column layout any time the copy runs past three paragraphs.