CSS Wrap Text Around Image


Most of the web pages contain text around images. This technique is actually called wrapping the text around the image. So in this tutorial we will see how to wrap text around images by applying CSS image floating.

Step 1- Specifying the Image and Writing Text

First of all, give the path of the image in double quotes within the image source tag. Within the same tag, specify CSS image floating class which would be used for aligning the image. First use the “Float Left” element.

After that, open up the paragraph tag and just write any text within that.

Then, open up the image source tag once more and repeat the same steps, but this time, use the float right class for aligning the image.

Make sure to close the paragraph tags after the texts.

With that done, close the body and html tags as well.

Image Source and Wrapping Text

Step 2- Defining the Classes

Now let’s define the CSS image floating classes, declared in previous steps.

For that, open up the style tag before the body tag and let’s understand the working of the classes.

The float method in the float left class is actually placing the image to the left with 4 pixels from the left corner of the screen. Similarly, the float right element inside float right class moves the image to the right side.

With that done, close the style tag and save the HTML document.

Floating Classes Defined

Step 3- Viewing the Effect

Now when we open up the HTML file in the browser, we will see the text around images would be wrapped according to our code.

Wrapping Done

And that is how text is wrapped around an image.