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 CSS

Last Updated : Mar 11, 2024

Image And Text Side By Side HTML CSS

In this tutorial we will show you the solution of image and text side by side HTML CSS, let us consider an example of webpage in which on top there is header. In the header, we see that there is an image on left side with the name of webpage or company.

And right side there may be any text or menu something. So, here you found that there is an image on left side and some text on right side.

So, today our article is on topic that how to align image and text side by side in html with css

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

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 files that we show here. We hope that you understand the example properly.

<!DOCTYPE html>
      <html>
        <head>
          <title> Title of the document<title>
</head>
<style>
        .main{
            width: 500px;
            height: 500px;
            margin: auto;
        }
        .inner{
            width: 500px;
            height: 500px;
        }
        .row{
            width: 500px;
            height: 100px;
        }
        .img_src{
            float: left;
            width: 250px;
            height: 100px;
        }
        .txt_here{
            float: left;
            width: 250px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="inner">
            <div class="row">
                <div class="img_src">
                    <img src="demo10/logo.jpg" alt="">
                </div>
                <div class="txt_here">
                    this is example here
                </div>
            </div>
            <div class="row">
                <div class="img_src">
                    <img src="demo10/logo.jpg" alt="">
                </div>
                <div class="txt_here">
                    this is text side you are able
                </div>
            </div>
            <div class="row">
                <div class="img_src">
                    <img src="demo10/logo.jpg" alt="">
                </div>
                <div class="txt_here">
                    to write what you want here
                </div>
            </div>
            <div class="row">
                <div class="img_src">
                    <img src="demo10/logo.jpg" alt="">
                </div>
                <div class="txt_here">
                    the text side aligned side to the image
                </div>
            </div>
            <div class="row">
                <div class="img_src">
                    <img src="demo10/logo.jpg" alt="">
                </div>
                <div class="txt_here">
                    photos are same you can choose different one also
                </div>
            </div>
        </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.
  4. Here, we create one main div and inside this another div. after this we create a row and we divide the row in two parts with width attribute. After this we specify dimensions to both image and text with float left to align them side by side.
  5. This is the basic model to align images and text side by side. And this method is mostly used everywhere. This is not mandatory that weather it is top heading or any part of body.
  6. We hope that you understand this article properly.
  7. At last, the <body> and <html> tags are closed with </body> and </html> respectively.

Conclusion :-

In conclusion, here we want to say that today we learn that how we are able to align image and text side by side with the help of html and CSS.

So, here is one assignment for you to make a header with width 100% and in which left side is logo that is an image and in right side there is an input box for login with email, password with a button to submit.

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

Author Image About Anjali

Experienced Computer Programmer with a broad range of experience in technology. Strengths in application development and Object Oriented architecture design, front end programming, usability and multimedia technology. Expert in coding languages such as C, C++ Java, JavaScript, PHP and more.

Follow Anjali On Linkedin 🡪