How to wrap text around an image using HTML/CSS

Image placements

Placement affects image and text interaction. Shall your image assert dominance or subtly blend in?

Left-sided image

<!-- Leftists, unite! -->
<img src="image.jpg" alt="" style="float: left; margin-right: 10px;">
<!-- Your text content goes here -->


Right-sided image

<!-- Lean right, move right. -->
<img src="image.jpg" alt="" style="float: right; margin-left: 10px;">
<!-- Your text content goes here -->


Centered image - Text partners

<div style="text-align: center;">
  <img src="image.jpg" alt="">
</div>
<!-- Your text content goes here -->


For centered designs, consider CSS Grid or Flexbox if text wrapping is needed.

Non-rectangular image text wraps

Make your text ride the waves around custom shapes with shape-outside property. For circular rodeos:

/* Meet circle, the round square. */
.circle-image {
  border-radius: 50%;
  float: left;
  shape-outside: circle(50%);
  margin-right: 10px;
}


HTML saddle:

<img src="circle-image.jpg" alt="" class="circle-image">
<!-- Round we go -->
<p>Your text here...</p>


With circles, ellipses, and polygonal shapes, shape-outside narrates fascinating stories.

Responsive design for image sizes and text wrap

Because not all screens play in the same park, make your image adapt with width and margin. Use media queries for small screens:

/* When it's squeezy-peasy */
@media (max-width: 600px) {
  img {
    float: none;
    margin: 0 auto;
    display: block;
  }
}


Clean layout and overflow control

Avoid awkward text wraps under the image using overflow: hidden and control how your paragraphs interact:

/* Text-wrap: Keeps things tidy since 1996 */
.text-wrap {
  overflow: hidden;
}

.text-wrap::after {
  content: "";
  display: table;
  clear: both;
}


Margins and spacing maintain personal boundaries for readability.

Complex layout manners with CSS Shapes

Sometimes a simple float won't cut it. CSS Shapes to the rescue for complex text routes:

/* Why be normal when you can be a polygon? */
.shape-image {
  float: left;
  shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}


Here's where online sandboxes like jsfiddle shine, letting you fine-tune layouts.

Pro tips

1. Background Colors: Differentiate your image using background-color. It's like picking clothes that make you stand out.
2. Pseudo-elements: Use invisible elements to maintain a precise layout. Like a secret agent, they are there but you won't see them.
3. Margins and Spacing: Margins keep your text and image apart, as personal bubbles are essential even in code.
4. Float Mix: Using float: left; and float: right; together can yield unique text arrangements.
5. Advanced Tech: For more control over wrapping CSS Grid and Flexbox offer modern layout dynamics.