All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

Image And Text Side By Side HTML Responsive

Last Updated : Mar 11, 2024

Image And Text Side By Side HTML Responsive

In this tutorial we will show you the solution of image and text side by side HTML responsive, in HTML today our topic is about to how to align image and text side by side in html.

For example, let us consider an example in which we have to make two division in webpage and the both covers 50% if webpage. In first division there be an image and in other there is text.

Now the points are that there should be no any margin in between division and images should get changed according to text.

Step By Step Guide On Image And Text Side By Side HTML Responsive :-

Now, here we define that for making this type of webpage. There are many ways with the help of which this can be done.

Today, here we will provide you an example in html codes with the help of which you are able to align images and text side by side in html. We also include some CSS that we show here.

Here, below is the codes we hope that you understand this properly.

<!DOCTYPE html>
      <html>
        <head>
          <title> Title of the document</title>
        <style>
            body{
                margin: 0%;
            }
            .row{
                width: 100%;
                height: 600px;
            }
            .column{
                width: 50%;
                height: 600px;
                background-color: aqua;
                float: left;
                font-size: 22px;
            }
            .column img{
                width: 100%;
                height: 600px;
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <div class="row">
            <div class="column">
                <img src="demo10/logo.jpg" alt="">
            </div>
            <div class="column">
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corrupti, quisquam repudiandae! Eligendi repellat veritatis aperiam sunt vero magni, commodi vitae corporis at eum quis, reiciendis harum aliquam deserunt eveniet officia possimus suscipit temporibus impedit soluta repellendus sit. Beatae eius eveniet illum, quidem itaque quaerat reiciendis libero voluptates vel fugit dolores rem voluptatem repellendus sunt unde veniam, facilis laudantium provident atque nostrum accusantium, eum rerum minima! Dignissimos totam laboriosam unde reprehenderit, aliquid sapiente commodi libero odio modi sunt aperiam possimus amet nesciunt id. Labore officia ab numquam? Dolores itaque iusto quam voluptate? Ex nisi voluptatum incidunt magnam assumenda debitis eos alias exercitationem quam velit. Voluptate rem accusamus enim id nobis, reprehenderit numquam? Ratione possimus voluptatum a sint architecto fugiat laboriosam, nulla dolorem sapiente rem ipsam beatae delectus omnis quae cum distinctio illum tempora, commodi amet! Tenetur consequatur perferendis vitae pariatur deserunt maxime possimus nihil, sequi magnam perspiciatis itaque quaerat minus quidem illum explicabo excepturi quas ullam adipisci iure porro tempore dolorum repellendus voluptatum? Dolore, minus necessitatibus voluptatem ipsa ullam eius voluptate rerum quidem adipisci. Delectus incidunt quaerat, aut sit suscipit praesentium minus nesciunt alias, et doloribus quod. Soluta obcaecati nihil esse reprehenderit culpa, sunt ducimus ad, adipisci alias delectus harum atque?
            </div>
            <div class="column">
                <img src="demo10/logo.jpg" alt="">
            </div>
            <div class="column">
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nostrum pariatur eveniet sunt praesentium sed sint quod iure eligendi. Libero laborum sit aspernatur eaque, aliquid ut consequatur aliquam repellendus voluptatem voluptatum porro architecto, earum dolorum sequi beatae alias facilis molestiae deleniti illum dolore consectetur? Animi aperiam sunt accusantium numquam quo distinctio id iure. Ut amet animi non adipisci praesentium maxime aliquam libero blanditiis quia. Soluta quia et animi vitae accusantium neque cum magnam ratione aperiam expedita explicabo tempora at unde maiores iste, voluptatum error dicta vel culpa esse quam non? Quaerat error eos amet sunt commodi repudiandae sapiente pariatur suscipit autem laborum quibusdam asperiores tempora eius quos fugiat porro sit dignissimos numquam, nemo, fuga doloremque nam. Similique, animi. Quas, et officia magnam suscipit voluptatum rem, veniam iusto fugiat tenetur earum quod vel pariatur amet harum? Sint ex corrupti quis nobis ratione dolorum autem laborum doloribus sed consectetur, dignissimos quisquam tempore minus, possimus molestias odit delectus, praesentium veritatis repudiandae repellat. Autem, libero esse? Dolorem omnis distinctio libero sint doloribus, dolore voluptas quas aperiam ea soluta, architecto modi dignissimos explicabo necessitatibus a reiciendis, excepturi hic ipsam magnam natus blanditiis cumque minima. At voluptatum harum blanditiis id nam architecto excepturi quidem voluptate enim consequatur?
            </div>
        </div>
    </body>
</html>
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively. Here, css codes are displayed here, which will described in next session.
  4. Here, the content to be showed on browser’s display is written here. Here, we create a row with 100% width and some height.
  5. After this we divide the row in columns 50% as shown in CSS. And in first division having class column, we adds image in this.
  6. And in other there is text. And repeat this again. Here. You see that when we scroll the html webpage, the image gets changed and text along with image.
  7. Hence, with the help of these several lines of codes we are able to make an html responsive webpage in which images and text are aligned side by side.
  8. At last, the <body> and <html> tags are closed with </body> and </html> respectively.

Conclusion :-

In conclusion, we show you that how you are able to make or create a webpage having image and text side by side html responsive.

In next sessions, we will also show you that how you are able to make image and text side by side in html with the help of css.

I hope this tutorial on image and text side by side HTML responsive helps you.