The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Flexbox cannot make individual paragraph lines flow around an image. It places an image and a text block beside each other as separate flex items. For text that runs alongside an image and then continues below it, use a floated image. Add shape-outside when the text should follow a circle, ellipse, polygon, or image contour.
Choose the layout that matches the result
| Desired result | Technique | Behavior |
|---|---|---|
| Image beside a separate text column | Flexbox | Image and text are independent layout items; lines stay inside the text item. |
| Paragraph beside and then below a rectangular image | float |
Inline text wraps around the image’s rectangular float area. |
| Paragraph following a non-rectangular contour | float plus shape-outside |
The float area follows a basic shape or an image-derived contour. |
MDN describes float as placing an element on the left or right side of its container while allowing text and inline elements to wrap around it. By contrast, flex-wrap only controls whether flex items move onto additional flex lines; it does not change paragraph line flow around a sibling.
As an Amazon Associate I earn from qualifying purchases.
Wrap text around a rectangular image with a float
Place the image before the paragraph in the markup, then float it and provide a margin for readable spacing:
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minute<img class="article-image" src="photo.jpg" alt="Description of the image">
<p>Paragraph text flows beside the floated image and continues below it when it reaches the image's end.</p>.article-image {
float: left;
width: 12rem;
height: auto;
margin: 0 1rem 0.75rem 0;
}Use float: right when the image belongs on the other side, and adjust the margin sides accordingly. The image remains in the document’s flow in the traditional float model, while adjacent inline content occupies the remaining horizontal space and then uses the full width after the float ends.
#1 Best Overall
Make text follow a circular image
A rounded image still occupies a rectangular box unless you define a float shape. Give the image equal dimensions, crop it with object-fit, and use shape-outside:
.article-image--round {
float: left;
width: 12rem;
height: 12rem;
object-fit: cover;
border-radius: 50%;
shape-outside: circle(50%);
margin: 0 1rem 0.75rem 0;
}The shape-outside property defines the area around which adjacent inline content wraps; it applies to floated elements, not to a flex container. CSS Shapes also supports shapes such as ellipses and polygons. See MDN’s Shapes overview for the available functions and examples.
Use an image-derived contour carefully
You can provide an image to shape-outside when the alpha channel should determine the wrap boundary. The image must be available to the browser with appropriate cross-origin permissions; MDN notes that a source lacking permissive CORS headers cannot be used for this shape effect.
.cutout {
float: left;
width: 16rem;
shape-outside: url("cutout.png");
margin: 0 1rem 0.75rem 0;
}Keep the visible image and the shape source aligned. A transparent PNG with empty space around the subject can produce a more natural contour than a rectangular photograph, but the result depends on the asset’s actual alpha channel.
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Keep the float from affecting later content
If a heading, card, or other block must begin below the image and paragraph, clear the float at the appropriate boundary:
.next-section {
clear: both;
}For a self-contained article or card, another option is to contain the float with a modern block formatting context:
.article-copy {
display: flow-root;
}Choose the boundary based on the document: clear a specific following element when only that element needs to move below the image, or use a containing wrapper when the float should not escape its component.
Responsive and accessibility checks
- Test with short text, long text, a tall image, and a narrow column; a float may leave a large blank area beside a very tall image.
- At small breakpoints, reduce the image width or remove the float if the remaining text measure becomes too narrow.
- Keep meaningful alternative text in
alt; use an empty value only for a genuinely decorative image. - Set explicit width and height (or an equivalent aspect-ratio strategy) when possible to reduce layout shifts while the image loads.
- Check the browsers and breakpoints you support. The cited references explain the CSS behavior but do not provide a version-by-version compatibility matrix for every project.
Common misconception: flex-wrap is not paragraph wrapping
This flex example creates two columns, not flowing text:
Best Value
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
.media {
display: flex;
gap: 1rem;
align-items: flex-start;
}
.media img {
width: 12rem;
height: auto;
}
Here the paragraph remains inside its flex item. Use this pattern when that fixed two-part composition is what you want. Switch to a float when the same paragraph must continue underneath the image.
Quick Recap
Practical decision checklist
- Decide whether the image and copy are separate columns or one paragraph wrapping around an image.
- Use Flexbox for separate columns; use a float for line-by-line wrapping.
- Add margins to the float so text does not touch the image.
- Add
shape-outsideonly when a rectangular wrap is insufficient. - Clear or contain the float before subsequent content that must start beneath it.
- Test narrow layouts and the actual images used on the page.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
