Split Div Into 2 Columns Using CSS

Fluid layout with responsive design

In the quest for responsive designs, pray to the CSS gods and use percentages for widths. This forms a fluid layout that can shape-shift to fit any screen size, ensuring usability and accessibility stay high on the pedestal:

.div-column {
  width: 50%; /* Why didn't the developer go broke? Because he used a 50% width model. */
  float: left; /* Because why right? */
}


Lastly, a media query comes to the rescue to stack the columns on smaller screens:

@media (max-width: 600px) {
  .div-column {
    width: 100%;
    float: none; /* The dev was feeling seasick, so he used float: none; */
  }
}


Maintain code structure and cleanliness

The path to professional and maintainable code is paved by the stone of separation of concerns. Ensuring external CSS files in place of inline styles let your code breathe:

<!-- Avoid this -->
<div style="display: flex;">
  ...
</div>

<!-- Opt for this -->
<link rel="stylesheet" href="style.css">
<div class="div-container">
  ...
</div>


In style.css:

.div-container {
  display: flex; /* Ready to do some stretches? */
}
/* ... */


The art of using additional CSS properties

Elevating your layout aesthetics, you can utilize CSS properties. Use column-gap for setting spaces and column-rule for adding a line segregating your columns:

.div-container {
  column-gap: 1em; /* Breathe in, Breathe out */
  column-rule: 1px solid #ccc; /* Keeping the lines clear and crisp */
}


Harness the power of advanced techniques

Adapt dynamic layouts by mastering CSS grid or columns. Grid-template-columns in CSS Grid unveils a layout design power you never knew you had:

.div-container {
  display: grid; /* Ready, set, grid! */
  grid-template-columns: 1fr 1fr; /* We hold equal power! */
}


The magic of clearfix and background colors

To safeguard the layout integrity, and preserve the background color, turn to clearfix:

.div-container::after {
  content: "";
  display: table; /* I always wanted to be a table. */
  clear: both; /* Make way, make way! */
}


This invisible pseudo-element maintains your div's structure and prevents it from meddling with floated elements.

Power of Bootstrap and other frameworks

Frameworks, take a bow! Bootstrap and its brethren offer you pre-built grid systems to chisel responsive multi-column layouts. Simply attach the appropriate classes:

<div class="row">
  <div class="col">Column 1</div>
  <div class="col">Column 2</div>
</div>


Craft columns sans extra divs

With CSS column-count, you can create columns without needing to conjure extra divs:

.content-div {
  column-count: 2; /* 1, 2 and voila! */
}


Don't forget to set break-inside to avoid slicing content across columns:

.content-div p {
  break-inside: avoid; /* No interruptions, please */
}
