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.
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.
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.
And that is how text is wrapped around an image.
Home