All TalkersCode Topics

Follow TalkersCode On Social Media

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

How To Divide HTML Page Into Two Parts Vertically

Last Updated : Mar 11, 2024

How To Divide HTML Page Into Two Parts Vertically

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

But today our concept is to solve the problem of division of the html page into two vertically parts. This can be done in various method, but our goal is to help you to solve the problem in easiest way.

So, today we will show you that how we are able to divide the html page into two parts vertically.

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

As, without wasting more time. This can be done with the help of division 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 vertically by using division tags. There is also a property used in codes named as float and its value is left.

Which means is that it floats the page left so that they aligns vertically. Now, the code is given as:

<!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: 50%; height: 500px; float:left;">
  this is first division that is vertically aligned
        </div>

        <div style="background-color: lightgrey; width:50%; height: 500px; float:left;">
  this is second division that is vertically 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. In the body tag, here we create a div tag, this is created here because we want to specify the area which we want to divide vertically in two parts.
  5. If you want to divide full body then give dimensions to height according of your screen.
  6. Then under this we have to specify two area, here we specify that area by using two div tags after this the remaining work is done by using CSS, in which we give them half-half width according to parent and use float left property to align div tag left by left.
  7. At last, the <body> and <html> tags are closed with </body> and </html> respectively.

Conclusion :-

In conclusion, we can say that we are able to divide html page vertically by using division tags and in next session we will also help you to understand that how you able to divide the page horizontally.

I hope this tutorial on how to divide HTML page into two parts vertically helps you and the steps and method mentioned above are easy to follow and implement.

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 🡪