Need some code to wrap text around an image? Usually, when you create an HTML page, everything goes in a linear fashion, that is, one block follows another. All my previous posts are examples of this, i.e. text, then image, then text, etc.
Sometimes, you may want to include text next to the image rather than below it. This is called text wrapping around the image. It’s actually quite easy to wrap text with HTML. Note that CSS is not required to wrap text.
However, these days the W3C recommends using CSS instead of HTML for this kind of task. I’ll mention both methods below, but if you can, it’s better to use CSS as it is more adaptable to responsive website designs.
Text wrapping around the image using HTML
Lorem ipsum dolor sit amet, conctetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis disparturient 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.
– /
To keep the text around the right side of the image, you must align the image to the left:
Your text goes here.
If you want the text to appear on the left and the image on the right, simply change the alignment setting to “right”.
Lorem ipsum dolor sit amet, conctetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis disparturient 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.
Your text goes here.
This is it! Pretty simple, right? The only time you’ll want to use CSS is if you want to add margins to images so that there is some space between the text and the image.
You can add margins to the image using the following CSS style code:
Your text goes here.
The above code uses the MARGIN CSS element to add 10 pixels of space to the right side of the image. Since we have aligned the image to the left, we want to add a space to the right.
Basically, the four numbers represent UPPER RIGHT DOWN LEFT. So if you want to add space to a right-aligned image, do the following:
Your text goes here.
So it’s pretty easy to use HTML to accomplish this task, but again, it might not work on responsive sites.
Text wrapping around the image using CSS
The best way to wrap text around an image is using CSS. This gives you finer control over the placement of elements and works better with modern coding standards.
Even though I included the CSS directly in the image tag in the example HTML, you should never do this again. Instead, you should have a separate file called a stylesheet that contains all of your CSS code.
In the IMG tag, you simply assign a class to the tag and give it a name. In my example, I named the class left. All I need to do in my stylesheet is add the following code:
.left {float: left; padding: 0 10px 0 0;}
As you can see, I’ve added 10px padding to the right side of the left aligned image. I also used the float property to move the image out of the normal flow of the document and place it on the left side of the parent container.
As you can see, it’s much easier than adding all this code to the IMG tag itself. Plus, it’s easier to manage and you can use a lot more CSS properties to customize the look and feel of your web page. If you have any questions, do not hesitate to comment. Enjoy!
–