Image and text side by side
This article is about how to align image and text side by side using HTML and CSS? or how we wrap content around an image. We have a solution to the problem by using the float property in CSS, which takes the value either left or right. If you give a value of “left”, your image will float to the left, and if you give a value of “right”, your image will float to the right of the parent element.
How to set image and text side by side
<html>
<head>
<title> float image and text </title>
<style type="text/css">
p{
font-size: 16px;
width:60%;
border: 2px solid black;
height: 150px; }
img{
padding: 10px;
float: left; }
</style>
</head>
<body>
<h1> Nature </h1>
<p>
<img width="30%" src="Nature.jpg">
In nature, nothing is perfect and everything is perfect.
Trees can be contorted, bent in weird ways,
and they're still beautiful.
</p></div>
</body>
</html>Output:
- In the above HTML code, first wrote the HTML general syntax.
- Then add your content using the <p> tag. You must make the image as a part of the <p> tag, which means creating an image inside the <p> tag as in the above code. If you create an image like that, your image will become part of the paragraph content.
- Now, to float the content around the image you need to use the “align” attribute to the <img> tag and give the value “left”.
- Set your image width using the width attribute and set the content width using the width property in CSS.
- See the above output, the image is floated to left and the content is floated to the right side of the webpage.
The image floats to the right
Code:
float:right;Output:
In the above Output, the image floats to the right because I have given the value “right” the float property.
Conclusion
So, you can easily use the float property to bring your image and text side by side using HTML and CSS.
