How To Create a Responsive Two Column Layout in HTML and CSS

As a web developer, you have a variety of layout you can use to present content on a website.

You can use a two column layout to display:

A two column layout is commonly used on screen wider than smartphone screen that is tablet, desktop and wide screen. With responsive design, the two columns are reorganized into one column on smartphone screens.

Using a two columns layout, you can split and structure the content into related sections.

Content in the same section with the same background appear to be relate.

content in same section but different background appear to be contrasted with each other.

This helps the reader to navigate your website smoothly.

How to divide a div into two columns in HTML and CSS

1. Two equal columns Layout HTML CSS

a. Using CSS Float

Add the HTML code:

<div class="columns">
   <div class="column">
     ///  Column 1: Put any relevant content here   ///
   </div>
   <div class="column">
     ///  Column 2: Put any relevant content here  ///
  </div>
</div>

Add the CSS code:

.columns {
Width: 100%;
}
.column {
  width:100%;
}
@media (min-width: 48em) {
  .column {
    width: 50%;
    float:left;
  }
  .columns {
    content: "";
    display: table;
    clear: both;
  }
}

b. Using Flexbox

<div class="columns">
   <div class="column">
     ///  Column 1: Put any relevant content here   ///
</div>
<div class="column">
     ///  Column 2: Put any relevant content here  ///
</div>
</div>
.columns {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
.column {
  flex: 50%;
}

c. 2 equal columns layout Using CSS Grid

<div class="columns">
   <div class="column">
     ///  Column 1: Put any relevant content here   ///
</div>
<div class="column">
     ///  Column 2: Put any relevant content here  ///
</div>
</div>
.columns {
  display: grid;
  grid-template-columns: 50% 50%;	
}

d. Two Column Layout Using Bootstrap

Add Bootstrap links in your <head> </head> section:

Add your HTML code:

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

e. Two Equal Columns Using Bulma

Add Bulma link in your <head> </head> section:

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css">

Then add the following HTML code within your <body> </body> tags.

<div class="columns">
    <div class="column">
      First column
    </div>
    <div class="column">
      Second column
    </div>
</div>

2. Create Sidebar Layout: Two column layout

a. Create sidebar layout CSS

Add the HTML code:

<div class="columns">
   <div class="column column-1">
     ///  Column 1: Put any relevant content here   ///
   </div>
   <div class="column column-2">
     ///  Column 2: Put any relevant content here  ///
  </div>
</div>

Add the CSS code:

.columns {
Width: 100%;
}
.column-1, .column-2 {
  width:100%;
}
@media (min-width: 48em) {
  .column-1 {
    width: 70%;
    float:left;
  }
  .column-2 {
    width: 30%;
    float:left;
  }

  .columns {
    content:"";
    display: table;
    clear: both;
  }
}

b. Create Sidebar Layout with Flexbox

<div class="columns">
   <div class="column">
     ///  Column 1: Put any relevant content here   ///
</div>
<div class="column">
     ///  Column 2: Put any relevant content here  ///
</div>
</div>
.columns {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
.column {
  flex: 50%;
}