Free tools Windows power users keep installed
One-click scans. No signup required.
Flexbox can place an image beside a text block, but it does not make paragraph lines flow around the image. For text that runs beside an image and continues underneath it, use float. For text that follows a circular or irregular edge, use float with shape-outside.
Choose the layout that matches the result
| What you want | Use | How it behaves |
|---|---|---|
| An image beside a separate text block | Flexbox | The image and text block are layout items. Paragraph lines stay within the text block. |
| Paragraph lines beside and then below a rectangular image | float |
The image sits at one side while inline text flows around it. See MDN’s float reference. |
| Paragraph lines following a circle or other contour | float with shape-outside |
The float’s wrapping area follows a defined shape rather than its rectangular box. See MDN’s shape-outside reference. |
Wrap text around a rectangular image with float
Place the image and paragraph in the same content flow. Float the image to the left or right, give it a width, and add margins to create space between it and the text.
<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;
}To wrap on the other side, change float: left to float: right and adjust the margins so the gap is on the image’s inward-facing side. The float property positions an element at the side of its container and allows text and inline content to wrap around it, as explained in MDN’s float guide.
Use shape-outside for a rounded or irregular contour
A float normally leaves a rectangular wrapping area. To make nearby lines follow a circle, ellipse, polygon, or image-derived contour, add shape-outside. It applies to floated elements; it is not a Flexbox text-flow setting. The MDN reference and CSS Shapes overview describe the available approach.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
For a circular crop, use a square image box and define a matching circle:
.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;
}If shape-outside refers to an image URL, that image must be served with CORS headers that permit its use; otherwise the image-based shape effect is unavailable, according to MDN’s shapes guidance.
Keep the layout predictable
- Set spacing explicitly. Margins on the floated image keep text from touching it.
- Check short text and tall images. A float can remain beside later content if the paragraph ends before the image does.
- Clear the float when needed. If the next section should begin below both the image and paragraph, clear the float or use a containing layout strategy suited to the surrounding document.
- Check narrow widths and target browsers. Test the actual responsive page; a desktop view alone does not establish how the layout behaves at other breakpoints.
Why flex-wrap is different
flex-wrap controls whether flex items move onto additional flex lines when the container is too small. It does not make individual lines of paragraph text flow around a sibling image. For that distinction, see MDN’s flex-wrap reference. Use Flexbox for a side-by-side image-and-text composition; use a float when the text itself must wrap around the image. For more on the float layout model, see MDN’s guide to floats.
Quick Recap
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
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.
