How to Divide Html Page Into Two Parts Vertically And Horizontally

We'll demonstrate how to split an HTML page into 2 sections, vertical sections, and horizontal sections in this lesson. We all know how we can break an HTML page into two sections, two vertical sections, and two horizontal sections.

However, the idea behind our solution today is to find a way to divide an HTML page into two vertical and horizontal sections. Although there are many ways to do this, our aim is to assist you in finding the simplest solution possible.

Therefore, today we will demonstrate to you how to split an HTML page into two parts, both vertically and horizontally.

Instructions for Dividing an HTML Page into 2 Parts Vertically, Stepwise:

In addition, without spending further time. Division tag including their descendant tag, the section tag, may be used to do this. But for this purpose, the division tag is often utilised.

Therefore, to help you act professionally, we will also show you how to use division elements to vertically split an HTML page. The property float, whose value is left, is another one that is utilised in programming.

Which implies that it float the page to the left so everything lines up vertically. The code is now provided as:

<!DOCTYPE html>
      <html>
        <head>
          <title> Vertical Division<title>
</head>
<body>
   		<div style="background-color: blue; width: 100%; height: 650px;">

        <div style="background-color: red; width: 50%; height: 550px; float:left;">
This is the first division to have a vertical alignment.
        </div>

        <div style="background-color: yellow; width:50%; height: 550px; float:left;">
  This is the second division to have a vertical alignment.
        </div>
    </div>

</body>
      </html>

To inform the web browser about the edition of HTML that document is written in, one first type! <DOCTYPE html>.
The <html> element is used to denote the start of a Html file.
As mentioned previously, the <head> tag is now used to provide details about a web page. A <title> element is included in this tag to enable us to provide the title of the website. The tags "head" and "title" are paired tags. Consequently, both conclude with the tags </head> and </title>, respectively.
The <body> element is used to specify the body of the website. This document contains all of the website's content. Since we wish to indicate the region that we want to split vertically into two halves, a div tag is placed here in the body tag.
Give height measurements that are appropriate for your screen if you wish to split the whole body.
Next, we must identify two areas; in this case, we do so by applying two div tags. After all this, the remaining work is completed using CSS; here, we give the areas half their parent's width then use the floating left attribute to align the div tags left to left.
The last step is to close the content & html tags with the corresponding </body> and </html> tags.

Instructions for Dividing an HTML Page into 2 Parts Horizontally, Stepwise:

Without spending any more time, as. The div element and its descendant tag, the section tag, may be used to do this. However, division tag is mostly used to accomplish this.

Therefore, to help you act professionally, we'll also show you how to use division elements to logically separate an HTML page into sections. If you're interested in learning more about vertical division, we've previously written a piece on the subject. Use the page as a resource by looking through it.

<!DOCTYPE html>
      <html>
        <head>
          <title> Horizontal Division<title>
</head>
<body>
     <div style="background-color: blue; width: 100%; height: 650px;">
        <div style="background-color: red; width: 100%; height: 300px;">
  This is the first division to have a horizontal alignment.
        </div>
        <div style="background-color: yellow; width:100%; height: 300px;">
This is the second division to have a horizontal alignment.
        </div>
    </div>
</body>
      </html>

The first thing we do now is type<! DOCTYPE html>, which tells the web browser which edition of HTML the document is written in.
The <html> element is used to denote the start of a Html file.
As mentioned previously, the <head> tag is now used to provide information about a web page. The usage of the <title> tag in this tag enables us to declare the title of the website. The tags "head" and "title" are paired tags. Therefore, both contain the closing tags </head> and </title>, respectively.
The body> element is used to specify the body of the website. Here are written all the information that will appear on the website.
Here, we build a div element with certain width and height in the body tag before letting you choose the background colour.
Two additional div tags are created within the main div. Additionally, its width must match that of the main div, but you should provide them a separate but lower height than that of the main div.
Keep in mind that the height of the main div is equal to the total of the heights of the sub div tags.
As you can see in your browser right now, the site is split into two sections, each of which has the height you requested.
The last step is to finish the content and html tags with the corresponding </body> and </html> tags.

Conclusion :-

By conclusion, we can conclude that utilising division elements, we are able to separate an HTML page both vertically and horizontally.

I really hope that this article on how to split an HTML page into two sections will be helpful to you and that the above-mentioned techniques and methodology will be simple to use.

Next TopicHow to Make A Responsive Website For All Devices

← prev next →