The fix is one CSS property: float. It pulls the image to the left or right edge and lets the text flow beside it and underneath it. Two details cause most of the pain. The image must come before the text in your markup, and it can’t be a Flexbox or Grid item, because those layouts place boxes side by side and never flow text around them. Get either wrong, and the text drops below the image. On phones, a floated photo can also squeeze the text into a sliver only three words wide.
Quick answer: To wrap text around an image in HTML, place the img before the paragraph and set float: left or float: right in CSS, with a margin on the inner edge. Text then flows beside and under the image. Add display: flow-root to the wrapper to contain the float, and remove the float on narrow screens.
Table of Contents
Wrap Text Around an Image in HTML With CSS Float
Use float to wrap text around an image in HTML. Place the img tag before the paragraph, then set float: left or float: right in CSS. The image moves to that edge, and the text flows beside it, then underneath once the text passes the image’s height. Add a margin on the inner side.
Here is the smallest working version. The image comes first in the markup, because a float only affects the content that follows it.
html
<article class="post">
<img class="wrap-img" src="team.webp"
alt="Two designers reviewing a website layout"
width="320" height="213">
<p>Your first paragraph goes here. It starts beside the image.</p>
<p>Later paragraphs keep flowing around the image until they pass its height.</p>
</article>css
.wrap-img {
float: left; /* image sits left, text flows on its right */
margin: 0 1.5rem 1rem 0; /* space on the right and bottom edges */
max-width: 40%; /* never let the image take over the column */
height: auto; /* keep the original proportions */
}The width and height attributes matter more than they look. They tell the browser how much room to reserve before the file loads, so the paragraph doesn’t jump when the image appears. With height: auto in the CSS, the image still scales down without stretching.
Float Left or Float Right
Float: left puts the image on the left, and the text runs down its right side. Float: right does the opposite. Pick the side that fits your layout. A left float works well at the start of a section, while a right float suits a supporting photo that appears after a few lines of text.
If your site serves right-to-left languages such as Urdu or Arabic, MDN lists float: inline-start and float: inline-end as valid values. They flip with the page direction, so one rule works for both reading directions.
Add Space Between the Image and the Text
Text pressed against a photo looks cramped. Add a margin on the edge that faces the text, plus a bottom margin so the next lines don’t touch the image. For a left float, use margin: 0 1.5rem 1rem 0. For a right float, flip it to margin: 0 0 1rem 1.5rem. Rem units let the gap grow with the reader’s font size.
Why the Old align Attribute Is Not the Answer
Older tutorials wrap text with align=”left” written straight into the img tag. Browsers still draw it, but MDN marks the image align property as deprecated and points developers to float for left and right placement. Keep layout rules in your stylesheet and the markup clean.
| Old HTML | Modern CSS |
|---|---|
| align=”left” | float: left |
| align=”right” | float: right |
| align=”top”, “middle” or “bottom” | vertical-align (inline images) |
| br clear=”all” | clear: both |
Control Where Wrapped Text Stops With clear and flow-root
A floated image leaves the normal flow of the page, so its container can collapse and the next section can slide up beside it. Fix both with two tools. Put display: flow-root on the wrapper to keep the float inside it. Put clear: both on the next heading to force it below the image.
Here is what the problem looks like. The image is taller than the text beside it, so it hangs out of its container like a flag. The container’s border and background stop at the text, and the following heading may wrap up next to the image.
MDN explains that display: flow-root creates a new block formatting context, so floats no longer poke out of the bottom of the element. That one line solves the collapsed container.
css
.post { display: flow-root; } /* wrapper now contains its floated images */
.post h2 { clear: both; } /* each heading starts below any floated image */flow-root vs overflow and the Old Clearfix
Developers once used overflow: hidden or a clearfix pseudo-element to contain floats. MDN warns that using overflow only to create a block formatting context can cause unwanted scrollbars or clipped shadows. Display: flow-root has no such side effects, so reach for it first.
Clear: both does a different job. It does not contain the float. It makes one element, such as a section heading, start below the image. Use both together when a post mixes wrapped images with full-width headings and callout boxes.
Wrap Text Around an Image With a Caption
To wrap text around an image with a caption, float the figure element, not the img inside it. The figcaption then travels with the picture and stays directly under it. Give the figure a width, reset the browser’s default side margins, and let the image fill the figure at 100% width.
A caption breaks the simple pattern because the img and its caption are two separate boxes. If you float only the img, the caption stays behind in the normal flow and lands in the wrong place. Floating the figure moves both as one unit.
html
<figure class="wrap-fig">
<img src="dashboard.webp"
alt="Analytics dashboard showing weekly traffic"
width="400" height="250">
<figcaption>Weekly traffic by source.</figcaption>
</figure>
<p>The paragraph that wraps around the figure goes here.</p>css
.wrap-fig {
float: right;
width: 40%;
max-width: 360px;
margin: 0 0 1rem 1.5rem; /* replaces the browser's default 40px side margins */
}
.wrap-fig img { display: block; width: 100%; height: auto; }
.wrap-fig figcaption { margin-top: 0.5rem; font-size: 0.875rem; color: #555; }Browsers give figure a default margin of 40 pixels on the left and right. The margin shorthand above replaces it, which is why the image doesn’t sit pushed in from the edge.
Keep the Figure Out of a Flex Parent
Developers on community forums report the same trap. If the figure is a direct child of a Flexbox container, the float is ignored. Wrap the whole thing in a plain div, or move the figure into a normal block element, and the float works again.
Write the alt text to describe the picture, and let the caption add context. Screen readers read both, so a caption that repeats the alt text only adds noise.
Wrap Text Around a Round or Irregular Image With shape-outside
Float plus border-radius makes an image look round, but the text still wraps the square box. Add shape-outside: circle(50%) so the text follows the curve. The property works on floated elements, and shape-margin sets the gap between the curve and the words.
This replaces the old workaround of stacking empty floated spans of different widths to fake a curve. One line of CSS now does the job.
css
.avatar {
float: left;
width: 160px;
height: 160px;
border-radius: 50%; /* the image looks round */
shape-outside: circle(50%); /* the text wraps a circle too */
shape-margin: 1rem; /* gap between the curve and the text */
}Keep the margin at zero on a shaped float. The shape is measured from the margin box by default, so a lopsided margin turns your circle into an oval. Use shape-margin for spacing instead.
Wrap Text Around the Outline of a Transparent Image
You can also let text hug a cut-out photo. Point shape-outside at the image itself, and the browser uses the image’s alpha channel to find the edge. Pixels that are transparent stay open for text. MDN’s guide to CSS shapes covers the full set of shape functions.
css
.cutout {
float: left;
shape-outside: url("product-cutout.png");
shape-image-threshold: 0.5; /* how opaque a pixel must be to count as shape */
shape-margin: 12px;
}Two rules apply. The image must be served in a way that passes CORS, or the browser ignores shape-outside and uses no shape at all. And the file needs a format with transparency, so check WebP, AVIF and JPEG compared before you export. Browsers without shape support fall back to the plain rectangle, so the layout still works.
Do Flexbox and Grid Wrap Text Around an Image?
No. Flexbox and Grid place an image and a text block side by side, but the text never flows underneath the image. MDN notes there are no floating children inside a flex or grid container. Use float or shape-outside when text must wrap, and use Flexbox or Grid when two columns are enough.
This is the most common mistake in forum threads on the topic. A developer floats an image inside a flex container, nothing happens, and the layout looks broken. The float isn’t wrong. The container ignores it.
| Technique | Text flows under the image? | Best for | Watch out for |
|---|---|---|---|
| float | Yes | Blog and article images | Contain it with flow-root |
| Flexbox | No, two columns only | Cards, media objects | Float is ignored on flex items |
| Grid | No, two columns only | Image-and-text rows | Float is ignored on grid items |
| float + shape-outside | Yes, follows the curve | Round or cut-out images | Needs a float, and CORS for url() images |
When Side by Side Beats Wrapped
If the text should stay beside the image and never run under it, Grid is the cleaner tool. An author bio or a product row is a good example.
css
.media {
display: grid;
grid-template-columns: 200px 1fr; /* fixed image column, flexible text column */
gap: 1.5rem;
align-items: start;
}
.media img { width: 100%; height: auto; }Float Inside a Flex or Grid Parent
Sometimes the page layout is already Flexbox or Grid, and you still want wrapped text. Float a child inside a normal block that sits within the flex or grid item. The float works there, because the inner block uses ordinary flow.
html
<div class="card"> <!-- display: flex or grid -->
<div class="card-body"> <!-- normal block, so floats work here -->
<img class="wrap-img" src="photo.webp" alt="..." width="320" height="213">
<p>Text that wraps around the image.</p>
</div>
</div>Make a Wrapped Image Responsive on Phones
On a narrow screen, a floated image can squeeze the text into a column only a few words wide. Remove the float below a breakpoint, give the image full width, and restore the float on larger screens. A 600-pixel breakpoint is a sensible start, then adjust it to your own text size.
The easiest way to do this is mobile first. Small screens get the plain stacked layout with no overrides to cancel. Wider screens then add the float inside a min-width media query.
css
/* Phones: image on its own line, full width */
.wrap-img {
display: block;
width: 100%;
height: auto;
margin: 0 0 1rem;
}
/* 600px and up (37.5rem): float the image and let text wrap */
@media (min-width: 37.5rem) {
.wrap-img {
float: left;
width: 40%;
max-width: 320px;
margin: 0 1.5rem 1rem 0;
}
}Send Phones a Smaller File
A 320-pixel float doesn’t need a 1,200-pixel source file on a phone. Add srcset and sizes so the browser picks a file that fits the slot.
html
<img class="wrap-img"
src="team-640.webp"
srcset="team-320.webp 320w, team-640.webp 640w, team-1280.webp 1280w"
sizes="(min-width: 37.5rem) 320px, 100vw"
alt="Two designers reviewing a website layout"
width="320" height="213" loading="lazy">Skip loading=”lazy” on an image at the very top of the page, because that image often sets the page’s largest paint. For a broader look at breakpoints and layout stress points, see responsive web design in practice.
Wrap Text Around an Image in WordPress
In WordPress, select the image block, open the Align control in the toolbar, and choose Align left or Align right. WordPress adds an alignleft or alignright class, but your theme must style that class with float. If the text still sits below the image, add the float rules yourself.
The class names do nothing alone. The WordPress Codex states that the theme’s style sheet has to include the matching float rules before text wraps. Support threads show the same pattern again and again: the editor preview wraps the text, and the live page doesn’t, because the front-end theme never defined the classes.
On client WordPress builds, the missing alignleft rule is the most common reason an aligned image refuses to wrap. A short snippet in the child theme fixes it in minutes.
Add the Missing CSS
Put these rules in your child theme’s style.css or in the Additional CSS panel. Editing a child theme keeps your changes safe through theme updates, and our guide to the Astra child theme shows the setup.
css
.alignleft { float: left; margin: 0.25em 1.5em 1em 0; }
.alignright { float: right; margin: 0.25em 0 1em 1.5em; }
@media (max-width: 600px) {
.alignleft, .alignright {
float: none;
display: block;
margin: 0 auto 1em; /* stack and center on phones */
}
}Block Themes, Page Builders and the Editor Preview
Always check the front end, not only the editor. A theme that wraps its content in a Flexbox or Grid container can ignore floats on direct children, and some block themes limit the width of aligned images. If you use a page builder, its image-with-text widget is usually a two-column layout, not a true wrap. New to the editor itself? Read how to edit a page in WordPress first.
Fix Text That Won’t Wrap Around an Image
When text won’t wrap, one of six causes is almost always to blame. The image sits after the text in the markup, the parent is a flex or grid container, the float was applied to the wrong element, or the theme never styled the alignment class. Check these before you rewrite any CSS.
| Symptom | Likely cause | Fix |
|---|---|---|
| Text starts below the image | The img comes after the paragraph in the HTML | Move the img above the text |
| Float has no effect | The img is a direct child of a flex or grid container | Float a child inside a normal block |
| Next heading wraps beside the image | The float was never cleared | clear: both on the heading |
| Container border stops short | The float escaped its parent | display: flow-root on the wrapper |
| Caption lands in the wrong spot | The float is on the img, not the figure | Float the figure |
| Aligned image won’t wrap in WordPress | The theme has no alignleft or alignright CSS | Add the float rules |
| Thin column of text on phones | The image stays floated on small screens | Remove the float below 600px |
Inspect the Element Before You Edit
Open your browser’s developer tools, select the image, and check its computed float value. Then select the parent and check its display value. If the parent says flex or grid, you have found the cause. Our post on how to show margin in Chrome Inspect covers the overlay that makes spacing problems easy to spot.
Wrap Text on Both Sides of an Image
Float has no center value, so one floated image only has text on one side. Developers asking for text on both sides of a centered image hit this limit constantly. The practical choices are to split the copy into two blocks inside a three-column Grid, or to accept one-sided wrapping. The split changes reading order, so use it only when the layout gain is worth it.
FAQ
How do you wrap text around an image in HTML?
Put the img tag before the paragraph and apply float: left or float: right in CSS. Add a margin on the side that faces the text so the words don’t touch the image. The text flows beside the image and continues underneath once it passes the image’s height. Contain the float with display: flow-root on the parent if the container’s background stops short.
Can I wrap text around an image without CSS?
The old align=”left” and align=”right” attributes still render in browsers, but MDN marks the align property as deprecated and recommends float instead. They also give you no control over spacing or phone layouts. Use CSS from the start. One class in a stylesheet covers every image on the site, so you never repeat attributes in markup.
Can Flexbox wrap text around an image?
No. Flexbox places the image and the text block side by side in columns, and the text never flows under the image. MDN notes that floating children aren’t available inside flex or grid containers. Use float, optionally with shape-outside, when you need true wrapping. Use Flexbox or Grid when a clean two-column row is all you need.
Why is my text not wrapping around my image?
The usual causes are the image placed after the paragraph in the HTML, a flex or grid parent that ignores the float, or a theme that never styled the alignleft or alignright class. Check the image’s position in the markup first, then inspect the parent’s display value in developer tools. Fixing the order or the parent solves most cases within a minute.
How do I wrap text around a circular image?
Float the image, give it border-radius: 50% for the look, and add shape-outside: circle(50%) so the text follows the curve. Set shape-margin for the gap, and keep the element’s margin at zero so the circle isn’t measured from a lopsided box. Without shape-outside, the text still wraps the square, and the round image looks like it floats in a box.
How do I wrap text on both sides of an image?
You can’t do it with a single float, because float only accepts left or right. Split the text into two blocks and place the image between them in a three-column Grid, or choose a one-sided wrap. Both approaches work, but splitting the copy changes the reading order, so test it with a screen reader before you ship it.
How do I stop text from wrapping around an image?
Add clear: both to the element that should start below the image. That element then drops under the float instead of sliding up beside it. To keep an entire block, such as a callout, from wrapping, give it display: flow-root. A flow-root element forms its own layout area and does not overlap the floated image next to it.
How do I wrap text around an image in WordPress?
Select the image block, open the Align control, and pick Align left or Align right. WordPress adds an alignleft or alignright class to the image. If the text still sits below it, your theme is missing the float rules. Add .alignleft { float: left } and .alignright { float: right } with margins to your child theme or Additional CSS.
Is CSS float still fine to use in 2026?
Yes, for this job. Float remains the standard way to wrap text around an image, and every major browser supports it. Flexbox and Grid replaced float for page layout, not for text wrapping. Pair float with display: flow-root to contain it, and with shape-outside when you need curves. Use Grid when you want columns instead of wrapping.
Wrap Text Around an Image Once, Then Reuse the Class
The team photo from the opening now sits on the left, with the paragraph wrapped beside it and the next heading starting cleanly below. The fix took one float, one margin and a flow-root on the wrapper. The same class now works for every image on the site.
Float handles plain images. Float on the figure handles captions. Shape-outside handles curves. Flexbox and Grid handle side-by-side rows, which is a different job from wrapping. Add a breakpoint so phones get a stacked image, and add the alignleft rules if you work in WordPress. Those few habits cover nearly every case you will meet.
Which page on your site still has an image stranded on its own line, with a gap of white space beside it?
