How to wrap text around image css

CssHow-ToBeginner · 3 min read

How to Wrap Text Around Image Using CSS: Simple Guide

To wrap text around an image in CSS, use the float property on the image with values left or right. This makes the text flow beside the image instead of below it. Remember to clear floats if needed to avoid layout issues.

📐

Syntax

The main CSS property to wrap text around an image is float. You apply it to the image element to make text flow beside it.

float: left; — image floats to the left, text wraps on the right.
float: right; — image floats to the right, text wraps on the left.
margin — add space around the image so text doesn't touch it.

css

img {
  float: left; /* or right */
  margin: 0 1rem 1rem 0; /* space around image */
}

💻

Example

This example shows an image floated to the left with text wrapping on the right side. The margin adds space so the text doesn't stick to the image edges.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Wrap Text Around Image</title>
<style>
  img {
    float: left;
    margin: 0 1rem 1rem 0;
    width: 150px;
    height: auto;
  }
  p {
    font-family: Arial, sans-serif;
    line-height: 1.5;
  }
</style>
</head>
<body>
  <img src="https://via.placeholder.com/150" alt="Sample Image">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet eros blandit, dapibus nulla at, facilisis lorem. Proin nec justo nec urna cursus convallis. Sed vitae velit a urna dictum luctus. Vivamus non metus at libero cursus tincidunt.</p>
</body>
</html>

Output

A 150px wide image on the left with paragraph text flowing neatly on the right side, separated by margin space.

⚠️

Common Pitfalls

Common mistakes when wrapping text around images include:

Not adding margin around the image, causing text to touch or overlap the image edges.
Forgetting to clear floats after the image, which can break layout below the floated element.
Using float on block elements without proper width, causing unexpected layout shifts.

To fix float clearing issues, add a container with overflow: auto; or use a clearfix method.

css

/* Wrong: No margin, text sticks to image */
img {
  float: left;
}

/* Right: Add margin for spacing */
img {
  float: left;
  margin: 0 1rem 1rem 0;
}

/* Clear floats to fix layout below */
.container {
  overflow: auto;
}

📊

Quick Reference

Remember these tips for wrapping text around images:

Use float: left; or float: right; on the image.
Add margin to separate text from the image.
Clear floats after the image container to avoid layout issues.
Use semantic HTML with <img> and text elements like <p>.

✅

Key Takeaways

Use the CSS property float on images to wrap text around them.

Add margin around floated images to keep text from touching the image edges.

Clear floats after the image container to maintain proper page layout.

Float left makes text wrap on the right; float right makes text wrap on the left.

Always use semantic HTML and test your layout on different screen sizes.