You are currently viewing Simple way to Align Image and Text Side by Side in HTML CSS
  • Post category:HTML

Simple way to Align Image and Text Side by Side in HTML CSS

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:image and text side by side html css

  1. In the above HTML code, first wrote the HTML general syntax.
  2. 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.
  3. Now, to float the content around the image you need to use the “align” attribute to the <img> tag and give the value “left”.
  4. Set your image width using the width attribute and set the content width using the width property in CSS.
  5. See the above output, the image is floated to left and the content is floated to the right side of the webpage.
READ ALSO  Step by Step Guide to Make a Navigation Bar in HTML and CSS

The image floats to the right

Code:

float:right;

Output:image and text side by side html css

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.

Leave a Reply