How To Divide HTML Page Into Three Parts Vertically
Last Updated : Mar 11, 2024
IN - HTML | Written & Updated By - Amruta
In this tutorial we will show you the solution of how to divide HTML page into three parts vertically, in HTML you are able to divide the html page vertically as well as horizontally.
We have already publish articles on topics like, divide html page in two vertical columns and like divide webpage into two parts, etc.
Now, today we will show you how you are able to divide the html page into three parts vertically.
There are many methods with the help of which you are able to divide the html page into three parts vertically. And from them one method is as below.
Step By Step Guide On How To Divide HTML Page Into Three Parts Vertically :-
Now, as we say that there are many ways with the help of which you are able to divide the html page into three parts vertically.
And one from them is with the help of framesset tag and other one is with the help of div tags. Now, let us understand these two methods with the help of html codes.
<!DOCTYPE html> <html> <head> <title> Title of the document<title> </head> <body style="margin: 0;"> <div style="background-color: black; width: 100%; height: 700px;"> <div style="background-color: lightseagreen; width: 33%; float: left; height: 700px;"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laboriosam maiores ab placeat, aliquid iure, similique voluptate quo quam quod tempora incidunt, rem dignissimos nam recusandae fuga numquam hic nihil modi soluta? Vitae quia a, earum iste dignissimos illo, necessitatibus placeat praesentium, aspernatur ratione eum natus ex. Nemo molestiae esse distinctio! </div> <div style="background-color: lightgrey; width:33%; float: left; height: 700px;"> this is second division that is horizontally aligned </div> <div style="background-color: whitesmoke; width:33%; float: left; height: 700px;"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quaerat culpa, doloremque dignissimos aperiam sequi minus excepturi quasi qui ea repellat laborum tempore quos quidem consequatur, eos est, nulla facilis illo rem omnis voluptates similique nostrum aliquam. Dolore cupiditate temporibus, facilis laudantium aperiam voluptas optio molestiae. Quo possimus tempore animi. </div> </div> </body> </html>
Another way:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <frameset cols="33%,*,33%"> <frame src="demo1.html"> <frame src="demo2.html"> <frame src="demo3.html"> </frameset> <noframes> <body style="margin: 0;"> your browser does not support frameset tag </body> </noframes> </html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- 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.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here.
- Here, we describe two ways with the help of which you are able to divide the html page into three vertical parts. In first method we use div tags, whereas in other method we use we use frameset.
- Frameset is the most used way to divide the html page vertically. Because every pages load independently with the help of frame tag.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, here we can say that frameset is most used way with the help of which you are able to divide page vertically into three parts. I hope this tutorial on how to divide HTML page into three parts vertically helps you.
About Amruta
