fbpx

How to Divide a Div Into Two Columns?

In this article, Learn how to divide a div into two columns using CSS property which is by using either flexbox or float property of css.

By Using Flexbox

Understanding Flexbox

The key to this process is understanding the CSS flexbox layout. Flexbox is a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces.

When you apply display: flex; to a container, it becomes a flex container, and its children become flex items. Flex items, by default, will all try to fit onto one line. You can change this by using the flex-wrap property.

In our case, we want two columns, so we don’t need to worry about wrapping.

Step 1: Create a Div

First, we need a main div in HTML file which acts as a container for two columns further we have to divide the sub div into 50%.

<div class=”container”>
<!– Our Both Two Columns Will Go Here –>
</div>

Step 2: Create Two Columns

Inside our container div, we will create two more divs. Each of these will represent a column.

<div class=”container”>
<div class=”column”>
<p>This is column one</p>
</div>
<div class=”column”>
<p>This is column second</p>
</div>
</div>

Step 3: Style with CSS

Now we will use external CSS to style our divs which help us to divide the div. We will use the display: flex; property on the container to create a flexible layout, and then assign 50% width to each column.

.container {
display: flex;
}

.column {
width: 50%;
}

Column Width

The width: 50%; in our CSS code sets the width of each column to 50% of the width of the container. This means our columns will each take up half the container, creating two equal columns.

By Using Float

The float property in CSS is a powerful tool that can be used for a variety of tasks, including dividing a div into two columns. Here’s a step-by-step guide on how to do it by using the float property.

Step 1: Create the HTML Structure of Div

First, we need a div in HTML file which acts as a container for two columns in which creates two more divs that will represent the columns.

<div class=”container”>
<div class=”first-column”>Left Column</div>
<div class=”second-column”>Right Column</div>
</div>

Step 2: Apply the CSS

Now use external CSS which is float property to divs. The float property is used here to make the divs float to the left or right.

.container {
width: 100%;
overflow: auto; /* To clear the float */
}

.first-column {
float: left;
width: 50%;
}

.second-column {
float: right;
width: 50%;
}

In the above example, The float in CSS is used to set the position while the width property is used to specify the width of an element which is 50%.

Step 3: Clear the Float

Finally, to prevent the container from collapsing due to the floating columns, we use the overflow: auto; property on the container. This clears the float, allowing the container to maintain its height.

Conclusion

This article explored two methods for dividing a div into two columns using CSS: flexbox and float. Both offer effective solutions, each with its own unique approach.

Flexbox is a modern and widely supported method that provides ease of control over column widths and responsiveness. However, understanding the flexbox model is necessary for its effective implementation.

Float offers a simpler implementation with less code and broader browser compatibility. However, it can be less responsive and lead to layout challenges, with limited control over column widths.

Choosing the best method depends on your specific needs and project requirements. Consider the desired level of control, responsiveness, and compatibility before selecting flexbox or float for your project.

Still unsure about spacing buttons in HTML? Ask your question on EduSeekho and get expert help!

Also Read: How to Add Space Between Two Buttons in HTML | The Easiest Way To Do OR How to Embed Youtube Video in Html Without Iframe OR How to Create a Nested Webpage in HTML?