How To Divide A Div Into 2 Columns In HTML
Last Updated : Mar 11, 2024
IN - HTML | Written & Updated By - Pragati
In this tutorial we will show you the solution of how to divide a div into 2 columns in HTML, 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 that how we are able to divide or split a div into two columns in html.
For example, we want to say that there may be a parent div and under this div, two child are required which acts as two columns. Now, let us understand how we are able to divide a div into two columns in html.
Step By Step Guide On How To Divide A Div Into 2 Columns In HTML :-
Now, without wasting more time. Let us understand the example given below, in which we first we are going to create a div which is main div and covers whole webpage.
And under this two more div aligned vertically, and under any one from these, two more div. We hope that it seems to be more complex. So, let us understand the example or say html codes now.
<!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: 50%; float: left; height: 700px;"> <div style="background-color: red; width: 50%;height: 100%; float: left;"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis cumque ipsam rem! In quo saepe velit eos, eum numquam, incidunt ad iste odio repellendus inventore. Odit error culpa nihil facere, repellat beatae dolores sequi a adipisci dicta. Necessitatibus quidem error totam fugit, laborum eligendi saepe sunt aliquam sapiente commodi quos! </div> <div style="background-color: yellow; width: 50%;height: 100%; float: left;"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis, cumque, perspiciatis ut voluptatum corrupti voluptas deleniti laboriosam laudantium sit aliquam, aspernatur culpa molestiae tempore laborum similique? Laudantium, quisquam, architecto dolore, voluptatibus deleniti doloremque laborum aperiam saepe enim quidem magnam veniam blanditiis. Consectetur perspiciatis ipsum provident corrupti labore, hic nam expedita architecto. Quos provident qui at harum, voluptate consequatur ducimus inventore omnis quidem, possimus suscipit quae in voluptates et ex pariatur. Sit repellat quas minima perspiciatis, pariatur recusandae? Veniam dignissimos sapiente beatae quos, deleniti minus voluptates sunt corporis cum nihil ab amet quam debitis! Corrupti distinctio suscipit nostrum vero ratione assumenda. </div> </div> <div style="background-color: lightgrey; width:50%; float: left; height: 700px;"> this is second division that is horizontally aligned </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, as we want to say that we create special nothing. We create one main div tag, and under this two more and repeat again.
- Now, the main thing is to define dimensions and the use of float attribute with value left. Whereas, dimensions are the explanation of width and height. You have to create two child whose sum of width is equal to width of parent div.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, we can say that with the help of this article you are able to divide a div into two columns in html, in next session we will show you how you are able to divide a div into two rows in html.
I hope this tutorial on how to divide a div into 2 columns in HTML helps you.
About Pragati
