Splitting divs into 2 columns

Question

I have a code like this:

<div class="article-container">
  <div class="article">
    <h3>title1</h3>
    <p>article1</p>
  </div>
  <div class="article">
    <h3>title2</h3>
    <p>article2</p>
  </div>
  <div class="article">
    <h3>title3</h3>
    <p>article3</p>
  </div>
  <div class="article">
    <h3>title4</h3>
    <p>article4</p>
  </div>
</div>

and I want to transform this 1 lined column into 2 columns like this:

example image

I already tried to use this code, but is there any different way to split the div?

.article-container {
  display: flex;
  flex-wrap: wrap;
}

.article {
  flex-grow: 1;
  flex-basis: 50%;
}

.article:after {
  content: "";
  flex: auto;
}

<div class="article-container">
  <div class="article">
    <h3>title1</h3>
    <p>article1</p>
  </div>
  <div class="article">
    <h3>title2</h3>
    <p>article2</p>
  </div>
  <div class="article">
    <h3>title3</h3>
    <p>article3</p>
  </div>
  <div class="article">
    <h3>title4</h3>
    <p>article4</p>
  </div>
</div>

It's different from this other question Split Div Into 2 Columns Using CSS, the "article" arrangement from this question is different. Anyone got the idea?

I would say bootstrap or flex would be a useful thing to pick up, unless this is for homework. — Araymer, Jul 05 '17 at 16:40
Possible duplicate of [Split Div Into 2 Columns Using CSS](https://stackoverflow.com/questions/1964297/split-div-into-2-columns-using-css) — James Douglas, Jul 06 '17 at 08:14

score 19 · Accepted Answer · answered Jul 05 '17 at 17:08

Nothing wrong with flexbox for this layout.

There's no need to use a pseudo-element.

.article-container {
  display: flex;
  flex-wrap: wrap;
}

.article {
  flex: 0 0 50%;
  padding: 10px;
}

* {
  margin: 0;
  box-sizing: border-box;
}

<div class="article-container">
  <div class="article">
    <h3>title1</h3>
    <p>article1</p>
  </div>
  <div class="article">
    <h3>title2</h3>
    <p>article2</p>
  </div>
  <div class="article">
    <h3>title3</h3>
    <p>article3</p>
  </div>
  <div class="article">
    <h3>title4</h3>
    <p>article4</p>
  </div>
</div>

score 4 · Answer 2 · answered Jul 05 '17 at 16:32

Here's one way using float/clear:

.article {
  float: left;
  width: 50%;
}

.article:nth-child(odd) {
  clear: left;
}

<div class="article-container">
  <div class="article">
    <h3>title1</h3>
    <p>article1</p>
  </div>
  <div class="article">
    <h3>title2</h3>
    <p>article2</p>
  </div>
  <div class="article">
    <h3>title3</h3>
    <p>article3</p>
  </div>
  <div class="article">
    <h3>title4</h3>
    <p>article4</p>
  </div>
</div>

score 2 · Answer 3 · answered Jul 05 '17 at 16:33

You may try using CSS3 Columns. But in this case, it looks a bit different in the information flow.

.article-container {
  -webkit-columns: 2; /* Chrome, Safari, Opera */
  -moz-columns: 2; /* Firefox */
  columns: 2;
}

<div class="article-container">
  <div class="article">
    <h3>title1</h3>
    <p>article1</p>
  </div>
  <div class="article">
    <h3>title2</h3>
    <p>article2</p>
  </div>
  <div class="article">
    <h3>title3</h3>
    <p>article3</p>
  </div>
  <div class="article">
    <h3>title4</h3>
    <p>article4</p>
  </div>
</div>

James Douglas · Answer 4 · 2017-07-05T16:48:23.823

This is actually quite simple. You just need to set .article to display: inline-block;, and seporate the second one from the first one with a <br>, and perhaps width: 49%; on the .article to get the effect of a proper column

.article {
  display: inline-block;
  width: 49%;
}

<div class="article-container">
  <div class="article">
    <h3>title1</h3>
    <p>article1</p>
  </div>
  <div class="article">
    <h3>title2</h3>
    <p>article2</p>
  </div>
  <br>
  <div class="article">
    <h3>title3</h3>
    <p>article3</p>
  </div>
  <div class="article">
    <h3>title4</h3>
    <p>article4</p>
  </div>
</div>

Splitting divs into 2 columns

4 Answers4

Linked

Related