How To Divide A Column Into Two Rows In HTML
Last Updated : Mar 11, 2024
IN - HTML | Written & Updated By - Dikshita
In this tutorial we will show you the solution of how to divide a column into two rows in HTML and how we are able to divide a column into two rows.
In previous sessions, we already showed you that how you can divide a row in two columns. Now, let us understand in this article how you are able to divide a column into two rows.
Step By Step Guide On How To Divide A Column Into Two Rows In HTML :-
Now, without wasting more time. Let us understand the example given below, in which we are going to show you how you are able to divide a column into two rows.
<!DOCTYPE html>
<html>
<head>
<title> Title of the document<title>
<style>
.column{
width: 100%;
height: 600px;
}
.column_one
{
width: 50%;
float: left;
color: white;
font-size: 25px;
}
.row_one{
padding: 5%;
height: 300px;
background-color: blue;
}
.row_two{
height: 300px;
padding: 5%;
background-color: red;
}
.column_two
{
width:40%;
height: 600px;
float: left;
background-color: black;
color: white;
font-size: 25px;
padding: 5%;
}
</style>
</head>
<body >
<div class="column">
<div class="column_one">
<div class="row_one">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus perspiciatis assumenda vel nemo nisi animi cum perferendis quam necessitatibus corporis voluptatibus, omnis neque esse aliquam debitis mollitia suscipit nihil. Dolor, obcaecati provident porro voluptate voluptatibus velit ipsum facere dignissimos accusantium ea quidem et quia veniam asperiores omnis beatae optio! Quae!
</div>
<div class="row_two">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur natus temporibus accusamus facere quod officiis! Aliquam quis veniam placeat, at ea dolorum, ex doloremque veritatis sit officiis ipsum unde neque illum commodi. Enim odio nam quam quaerat, sed voluptas in libero, ipsa at fuga quibusdam hic laborum pariatur sunt animi mollitia sapiente impedit rem obcaecati nihil. Libero a beatae sapiente!
</div>
</div>
<div class="column_two">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae amet accusamus fuga ex quod quisquam dolorem error repellat est, reiciendis illum excepturi soluta cumque ipsam? Culpa magnam odit fugit dolorem. Cumque pariatur quae at autem magni asperiores velit similique aut aliquid labore aperiam reprehenderit voluptates deleniti exercitationem, molestias, id explicabo temporibus minima ea voluptas possimus, fuga eveniet animi. Libero harum velit, id nulla, repudiandae ipsa iusto iure, nihil deserunt aliquam consequuntur quasi officia ex labore deleniti amet. Numquam sunt praesentium autem saepe non ipsum error, expedita sed, amet aliquam blanditiis sit modi dignissimos porro eligendi recusandae maxime provident, vel doloremque.
</div>
</div>
</body>
</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 create one main column with 100% width and under this we create two more columns with 50% width.
- The second column is customized with the help of CSS only. Whereas in first column we use CSS there to customize this and under this column we create two rows with equal width.
- You can see the html code and CSS which we applied to this html code. We hope that you understand the codes properly.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
At last in conclusion, here we can say that with the help of this article we are able to divide a column in two rows in html. I hope this tutorial on how to divide a column into two rows in HTML helps you.
About Dikshita
