All TalkersCode Topics

Follow TalkersCode On Social Media

How To Divide HTML Page Into Two Parts Horizontally

Last Updated : Jul 1, 2023

How To Divide HTML Page Into Two Parts Horizontally

In this tutorial we will show you the solution of how to divide HTML page into two parts horizontally, all of us know that we are able to divide the html page into vertical parts as well as horizontally parts.

But today our concept is to solve the problem of division of the html page into two horizontal parts.

This can be done with the help of various method, but our goal is to help you to solve the problem in professional way. So, today we will show you that how we are able to divide the html page into two parts horizontally.

Step By Step Guide On How To Divide HTML Page Into Two Parts Horizontally :-

As, without wasting more time. This can be done with the help of div tags and its child tag named as section tag. But mostly division tag is used for this work.

So, be professional we also teach you how to divide the html page horizontally by using division tags. If you want to know about vertical division, then we already published an article on this topic. You can go through that page for reference.

<!DOCTYPE html>
      <html>
        <head>
          <title> Title of the document<title>
</head>
<body>
     <div style="background-color: black; width: 100%; height: 700px;">
        <div style="background-color: lightseagreen; width: 100%; height: 350px;">
  this is first division that is horizontally aligned
        </div>
        <div style="background-color: lightgrey; width:100%; height: 350px;">
  this is second division that is horizontally aligned
        </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. Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here.
  5. In the body tag, here we first create a div tag with some height and width, whereas background color is your choice.
  6. Inside this main div, we create two more div tags. And their width must be same to width of main div, but in case of height you have to give them different but less than main div.
  7. Remember that the sum of heights of inner div tags equal to height of main div.
  8. As you now see on browser, the webpage gets divided into two divisions, with the height you specified.
  9. At last, the <body> and <html> tags are closed with </body> and </html> respectively.

Conclusion :-

In conclusion, we can say that after reading this article we are able to divide html page horizontally by using division tags and in next session we will also help you to understand how you are able to divide webpage horizontally with the help of frameset and frame tags.

I hope this tutorial on how to divide HTML page into two parts horizontally helps you.

Author Image About Riya

A recent graduate with a Bachelor of Technology (B.Tech) in Computer Science from India. She is passionate about leveraging technology to solve real-world problems. With a strong foundation and experience in programming languages such as Python, Django, HTML, CSS, and JavaScript, java, php and have honed her skills through hands-on projects and coursework.

Follow Riya On Linkedin 🡪