You can position text to either side of an image in HTML5 with CSS by using the following techniques:
- Specifying the "float" CSS property: Using the "float" CSS property, you can specify whether the text should appear to the left or right of the image. For example, to make the text appear to the left of the image, you can use the following code:
<div>
<img src="image.jpg" />
<p>Some text here</p>
</div>
<style>
img {float: left;}
</style>
- Using Flexbox: Flexbox is a powerful tool for creating layouts that also allows you to easily position elements next to each other. For example, you can use the following code to make text appear to the right of an image:
<div class="flex-container">
<div class="image-container">
<img src="image.jpg" />
</div>
<div class="text-container">
<p>Some text here</p>
</div>
</div>
<style>
.flex-container {display: flex;}
.image-container {flex: 1 0 auto;}
.text-container {flex: 3 0 auto;}
</style>
For more information on these techniques, please refer to this article:
https://www.sitepoint.com/community/t/positioning-text-relative-to-an-image-in-html5/179348
