Tag: two-column

To create the CSS responsive two-column layout (two equal columns, or two unequal columns) follow the steps below:

Demo (two equal columns):

Step1.

Add HTML

Create the column container and add two columns:

<div class="content">
  <div class="col" style="background-color:#2a9d8f;">
    <h4>Column 1</h4>
    <p>Add some text here..</p>
    <p>Add some text here..</p>
    <p>Add some text here..</p>
    <p>Add some text here..</p>
  </div>
  <div class="col" style="background-color:#e9c46a;">
    <h4>Column 2</h4>
    <p>Add some text here..</p>
    <p>Add some text here..</p>
    <p>Add some text here..</p>
    <p>Add some text here..</p>
  </div>
</div>

Step2.

Add CSS

* {
  box-sizing: border-box;
}

.col {
  float: left;
  width: 50%;
  padding: 10px;
}

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

Add the CSS @media rule to stack the columns vertically on small screens (resize the browser window to see the effect):

@media screen and (max-width: 600px) {
  .col {
    width: 100%;
  }
}

Demo (two unequal columns):

Step1.

Add HTML

Create the column container and add two columns:

<div class="col-container">
  <div class="col-1 left" style="background-color:#2a9d8f;">
    <h4>Column 1</h4>
    <p>Add Some text here..</p>
    <p>Add Some text here..</p>
    <p>Add Some text here..</p>
    <p>Add Some text here..</p>
  </div>
  <div class="col-1 right" style="background-color:#e9c46a;">
    <h4>Column 2</h4>
    <p>Add Some text here..</p>
    <p>Add Some text here..</p>
    <p>Add Some text here..</p>
    <p>Add Some text here..</p>
  </div>
</div>

Step2.

Add CSS

* {
  box-sizing: border-box;
}

.col-1 {
  float: left;
  padding: 10px;
}

.left {
  width: 40%;
}

.right {
  width: 60%;
}

.col-container:after {
  content: "";
  display: table;
  clear: both;
}
  

Add the CSS @media rule to stack the columns vertically on small screens (resize the browser window to see the effect):

@media screen and (max-width: 600px) {
  .col-1 {
    width: 100%;
  }
}

Enjoy coding!

Read also:

CSS Grid

CSS Columns