How to Wrap Text Around an Image in CSS

Hello! I’m Jahid Shah, a penetration tester and WordPress developer. In this article, I’m going to guide you the process of wrapping text around an image using CSS. This technique is important for creating visually appealing and well-structured web pages. If you’re a beginner or you have some experience with web development, this guide will help you to understand and implement text wrapping in CSS. So, Let’s jump into the topic “how to wrap text around an image in CSS“.

Table of Contents

What is Text Wrapping?

Text wrapping is a technique that is used to make text flow around an image or other elements on a web page. This creates a more attractive and professional layout, as opposed to having text and images in separate blocks. You can make better use of space and improve the overall aesthetics of your website by wrapping text around an image.

Why Use CSS for Text Wrapping?

CSS provides more control and flexibility in your design when you use HTML to wrap text around an image. Mainly CSS helps you define styles that can be easily reused and changed making your code cleaner and more maintainable. Additionally, CSS is better suited for responsive design that ensures your website or webpage looks great on all devices.

Basic CSS Properties for Text Wrapping

The float and margin are the primary properties of CSS that are used to wrap text around an image. Here’s a quick overview of these properties:

float: This property is used to position an element to the left or right that allowing text to flow around it.
margin: This property adds space around an element, preventing text from touching the image or blocks.

1. Basic concept of how to wrap text around an image in CSS

Let’s see the step-by-step process of how to wrap text around an image using CSS.

i. Basic HTML Structure

First, create a basic HTML structure with an image and some text. Here’s an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Wrapping Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="content">
        <img src="https://jahidshah.com/wp-content/uploads/2024/09/jahid-shah.webp" alt="Sample Image" class="wrap-image">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.</p>
    </div>
</body>
</html>

In this example, we have an image with the class wrap-image and a paragraph (<p></p>) of text.

ii. CSS for Text Wrapping

Next, create a CSS file (e.g., styles.css) and add the following styles from the below:

.wrap-image {
    float: left; /* Float the image to the left */
    margin: 0 15px 15px 0; /* Add margin to the right and bottom */
}

Here’s the explanation of the CSS does:

float: left;: This floats the image to the left, allowing text to wrap around it on the right.
margin: 0 15px 15px 0;: This means adding a 15px margin to the right and bottom of the image and creating space between the image & the text.

iii. Responsive Design

To make your design responsive so that your layout looks great on all devices, you need to use media queries to adjust the styles for different screen sizes. Here’s an example:

@media (max-width: 600px) {
    .wrap-image {
        float: none; /* Remove float on small screens */
        display: block; /* Display image as a block element */
        margin: 0 auto 15px; /* Center the image and add bottom margin */
    }
}

iv. Additional CSS to Make the Layout Professional:

	.content{
	width:80%;
	margin:0 auto;	
	}
	.content img{
	width:300px;
	height:auto;
	}
	.content p{
	font-size:30px;
	text-align:justify;
	}

This CSS just adds to decorating the layout nicely and it is also for the below two methods. Here,

1. “.content` class”:

‘width: 80%;’: This sets the width of elements with the class `.content` to 80% of their parent container’s width.
‘margin: 0 auto;’: This centers the `.content` element horizontally within its parent container by setting the top and bottom margins to ‘0’ and the left and right margins to auto.

2. “‘.content img’ selector”:

‘width: 300px;’: This sets the width of all images within the ‘.content’ class to 300 pixels.
‘height: auto;’: This ensures that the height of the images adjusts automatically to maintain their aspect ratio.

3. “‘.content p’ selector”:

‘font-size: 30px;’: This sets the font size of all paragraphs within the ‘.content’ class to 30 pixels.
‘text-align: justify;’: This aligns the text within the paragraphs to be justified, meaning the text is spaced so that each line has equal width, creating a clean, block-like appearance.

This CSS code is useful for creating a centered content area with specific styling for images and paragraphs within that area. If you have any more questions or need further clarification, feel free to ask!

v. Let’s see, what this CSS looks like:

Basic concept of how to wrap text around an image in CSS

In this example, the image will no longer float on the screens that is smaller than 600px. Instead, it will be centered with a margin at the bottom. Also read, Navbar Click to Change Div Content Without JavaScript.

2. Advanced Techniques

From the above concept, I hope you understand the basics of “how to wrap text around an image in css”. Now let’s explore some advanced techniques for wrapping text around an image.

i. Wrapping Text Around Multiple Images

If you have multiple images in your content, you can use different classes to float them in different directions. Here’s an example:

<div class="content">
    <img src="image1.jpg" alt="Sample Image 1" class="wrap-left">
    <p>First paragraph of text...</p>
    <img src="image2.jpg" alt="Sample Image 2" class="wrap-right">
    <p>Second paragraph of text...</p>
</div>

And the corresponding CSS:

.wrap-left {
    float: left;
    margin: 0 15px 15px 0;
}

.wrap-right {
    float: right;
    margin: 0 0 15px 15px;
}

In this example, the first image floats to the left, & the second image floats to the right to create a more dynamic layout.

ii. Adding Borders and Padding

You can enhance the appearance of your images by adding borders and padding. Here’s an example:

.wrap-image {
    float: left;
    margin: 0 15px 15px 0;
    border: 2px solid #ccc; /* Add a border */
    padding: 5px; /* Add padding inside the border */
    background-color: #f9f9f9; /* Add a background color */
}

This CSS adds a border, padding, and background color to the image, making it stand out more.

iii. Let’s see, what this CSS looks like:

3. Using Flexbox for Text Wrapping

i. Html

While float is a common method for wrapping text, you can also use Flexbox for more complex layouts. Here’s an example:

<div class="flex-container">
    <img src="image.jpg" alt="Sample Image" class="flex-image">
    <div class="flex-text">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    </div>
</div>

ii. And the corresponding CSS:

.flex-container {
    display: flex;
    align-items: flex-start; /* Align items at the start */
}

.flex-image {
    margin-right: 15px; /* Add margin to the right */
}

.flex-text {
    flex: 1; /* Allow text to take up remaining space */
}

In this example, Flexbox is used to create a flexible layout where the image and text are aligned side by side.

iii. Let’s see, what this CSS looks like:

Conclusion

Wrapping text around an image using CSS is a powerful technique that improves the visual appeal and readability of your web pages. By using the CSS elements float property and adding margins, you can create clean and professional layouts. Additionally, advanced techniques like Flexbox provide even more flexibility for complex designs.

I hope this article helps you understand “how to wrap text around an image using CSS”. Whether you’re a beginner or an experienced developer, these techniques will help you create beautiful and responsive web pages. If you have any questions about the topic or need further assistance, feel free to reach out!