EduSeekho | Knowledge Milega, Success Dikhega!

How to Divide a Div Into Two Columns? | Best 2 Ways

Learn How to Divide a Div Into Two Columns?
Table of Contents

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.

How to Divide a Div Into Two Columns?

  • By Using Flexbox to Divide a Div Into Two Columns
  • By Using Float to Divide a Div Into Two Columns
How to Divide a DIV Into Two Columns: Flexbox & Float
How to Divide a DIV Into Two Columns: Flexbox & Float

By Using Flexbox to Divide a Div Into Two Columns

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%.


<!-- Container for content -->
<div class="container">
    <!-- Content goes here -->
</div>

Step 2: Create Two Columns

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


<!-- Container for columns -->
<div class="container">
    <!-- First column -->
    <div class="column">
        <p>This is column one</p>
    </div>
    <!-- Second column -->
    <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.


/* Applying flexbox layout to the container */.container {
    display: flex;
}

/* Setting the width of each column to 50% */.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 to Divide a Div Into Two Columns

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.


<!-- Container for two columns -->
<div class="container">
    <!-- Left column -->
    <div class="first-column">Left Column</div>
    <!-- Right column -->
    <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.


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

/* Styling for the left column */.first-column {
    float: left; /* Float left to place it on the left side */    width: 50%; /* Taking 50% of the container width */}

/* Styling for the right column */.second-column {
    float: right; /* Float right to place it on the right side */    width: 50%; /* Taking 50% of the container width */}

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 On on How to Divide a Div Into Two Columns?

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.

FAQs on How to Divide a Div Into Two Columns?

Discover essential FAQs on How To to Divide a Div Into Two Columns, exploring both Flexbox and Float techniques for versatile web layout design.

To create two columns using Flexbox, you can set the display: flex; property on the container and adjust the flex property of the child elements to control their sizes.

Flexbox is a layout model in CSS that provides a more efficient way to distribute space and align items within a container. It allows you to easily create columns by setting the display: flex; property on the container.

The float property in CSS is used to specify whether an element should float to the left or right of its container. By floating two divs (columns) next to each other, you can create a multi-column layout.

To clear the float and prevent subsequent elements from wrapping around floated elements, you can use the clear property in CSS. This property is often applied to a clearing element placed after the floated columns in the HTML structure.

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

Share The Post: How to Divide a Div Into Two Columns? | Best 2 Ways On

How to Divide a Div Into Two Columns? | Best 2 Ways Article By EduSeekho