Split a div into two columns with CSS

In this article, we’ll show you how to use CSS to split a div element into two columns. Using CSS properties and some simple style directives, we can easily achieve this effect.

Read more: CSS Tutorial

Using the float Property

The float property is used in CSS to specify that an element floats, removing it from the default document flow and allowing other elements to be laid out around it. We can use the float property to split a div into two horizontal columns. Here is an example:

<style>
.container {
border: 1px solid black;
overflow: auto; /* Clear float effects */
}
.left-column {
float: left;
width: 50%;
}
.right-column {
float: right;
width: 50%;
}
</style>

<div class="container">
<div class="left-column">
<h2>Left Column</h2>
<p>Left column content goes here. </p>
</div>
<div class="right-column">
<h2>Right Column</h2>
<p>Right column content goes here. </p>
</div>

</div>

In the example above, we create a container div and use two child divs to represent the left and right columns, respectively. By setting the float properties of these two child divs to left and right, we make them float left and right, respectively. To prevent the float from affecting the layout of other elements, we set the overflow property of the container div to auto.

Using Flexbox Layout

Flexbox layout is a flexible layout method in CSS that makes it easy to create multi-column layouts. We can split a div into two columns by setting flexbox styles. Here’s an example of using flexbox layout:

<style> 
.container { 
display: flex; 
} 
.left-column { 
flex: 1; 
} 
.right-column { 
flex: 1; 
} 
</style> 

<div class="container"> 
<div class="left-column"> 
<h2>Left Column</h2> 
<p>Content for the left column goes here. </p> 
</div> 
<div class="right-column"> 
<h2>Right Column</h2> 
<p>Content for the right column goes here. </p> 
</div> 
</div> 

In the example above, we use the display property to set the container div layout mode to flex. Then, by setting the flex property of the child div elements to 1, we make them each occupy half the width of the container. This creates the effect of splitting the div into two columns.

Using Grid Layout

Grid layout is another powerful layout method in CSS that can easily create multi-column layouts. We can use grid layout styles to split a div into two columns. Here is an example using grid layout:

<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
</style>

<div class="container">
<div>
<h2>Left Column</h2>
<p>This is the content for the left column. </p> 
</div> 
<div> 
<h2>Right Column</h2> 
<p>Here is the content for the right column. </p> 
</div> 
</div> 

In the example above, we use the display property to set the container div to a grid layout. We then use the grid-template-columns property to divide the container into two columns, each with a width of “1fr,” evenly distributing the remaining space. Using the grid-gap property, we set a 10px gap between adjacent elements. This creates the effect of splitting the div into two columns.

Summary

In this article, we learned how to use CSS to split a div element into two columns. We can achieve this effect using the float property, flexbox layout, and grid layout. Choosing the appropriate layout method based on your needs allows for more flexible control over the width and arrangement of the two columns. I hope this article helps you understand CSS layout.