How to Split Div into 2 Columns
In this article, we will create how to split a div into 2 columns. To create two columns in the div, we should use the CSS “width” property to specify your content width and the CSS “float” property for content placement.
Code:
<html>
<head>
<title>Spling div into two columns</title>
<style type="text/css">
p{
padding: 7px;
text-align: justify; }
.left{
width: 45%;
float: left; }
.right{
width: 45%;
float: right; }
</style>
</head>
<body>
<div> <p class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<p class="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. </p>
</div>
</body>
</html>Output:
Steps:
Follow these simple steps to split the div into two columns:
- In the above code, two <p> tags are inside a <div> tag in the body section.
- The first <p> tag has a class name “left” and the second <p> tag have a class name “right”.
- To split the div into two columns, we set the CSS “width” property to 45% for both class names “left” and “right”.
- As in the code above, the “float” property should be set to “left” for the class name “left” and “right” for the class name “right”.
- Then see the output above, after using these two attributes the div is split into two columns
