Have a paragraph flow around another paragraph, in 4 columns

Question

I am splitting 4 column dynamically with adjustable height. But I want first paragraph in 2 columns and remaining paragraph separated by 4 columns. This is what I've tried:

.column-4 {
  -webkit-columns: 4;
  -moz-columns: 4;
  columns: 4;
  -webkit-column-gap: 15px;
  -moz-column-gap: 15px;
  column-gap: 15px;
}

.column-2 {
  column-span: 2;
  -webkit-column-span: 2;
  -moz-column-span: 2;
}

.text-justify {
  text-align: justify;
}

p:first-child {
  margin-top: 0;
}

<div class="text-justify column-4">
  <p class="column-2">Prime Minister Narendra Modi spoke to Andhra Pradesh Chief Minister N Chandrababu Naidu, a day after the TDP chief decided to pull out of the NDA government at the Centre</p>
  <p>According to official sources, the two Union ministers from the TDP quota will meet the prime minister at 6 pm today</p>
  <p>In a late night development yesterday, the TDP had announced its decision to pull out its ministers from the NDA government.</p>
  <p>The two TDP ministers in the Modi government are civil aviation minister Ashok Gajapathi Raju and minister of state for science and technology Y S Chowdary.</p>
  <p>In a late night development yesterday, the TDP had announced its decision to pull out its ministers from the NDA government.</p>
  <p>The two TDP ministers in the Modi government are civil aviation minister Ashok Gajapathi Raju and minister of state for science and technology Y S Chowdary</p>
  <p>In a late night development yesterday, the TDP had announced its decision to pull out its ministers from the NDA government</p>
  <p>The two TDP ministers in the Modi government are civil aviation minister Ashok Gajapathi Raju and minister of state for science and technology Y S Chowdary.</p>
  <p>In a late night development yesterday, the TDP had announced its decision to pull out its ministers from the NDA government</p>
  <p>The two TDP ministers in the Modi government are civil aviation minister Ashok Gajapathi Raju and minister of state for science and technology Y S Chowdary.</p>
  <p>In a late night development yesterday, the TDP had announced its decision to pull out its ministers from the NDA government.</p>
</div>

Please find below image, which is exactly what I want:

In the picture, the 2nd, 3rd, 4th and 5th block together form a continuous single paragraph. That is I am using 2 paragraph only. 1st paragraph occupies 2 columns and 2nd paragraph occupies remaining blocks (i.e. 2, 3, 4, 5) with equal height.

use table, or bootstrap row/col .. by they way why the bootstrap tag ? — Temani Afif, Mar 08 '18 at 14:39
2nd, 3rd, 4th and 5th paragraph are continuous. That is I am using 2 paragraph only. 1st paragraph occupies 2 columns and 2nd paragraph occupies remain pages with equal height. — Balamurugan, Mar 08 '18 at 14:46
Questions seeking debugging help must include the shortest code necessary to reproduce it **in the question itself.** NB - **Please don't abuse the code blocks to get around this requirement**. — Paulie_D, Mar 08 '18 at 14:53
It is in fact possible, @Paulie_D, see the answers. Granted, it only works in this case (where the number of columns is a multiple of the number of columns that the first paragraph spans), but still. — Just a student, Mar 08 '18 at 15:44

score 2 · Answer 1 · edited Mar 08 '18 at 16:07

You could use CSS Regions. The issue is that it has a really low support: around 17% currently.

It is still really experimental but there are polyfills:
• https://github.com/FremyCompany/css-regions-polyfill and
• https://github.com/adobe-webplatform/css-regions-polyfill.

Here is a demonstration of the second polyfill in action.

I would not recommend using CSS Regions in production at this time.

Rocks · Accepted Answer · 2018-03-08T15:44:22.820

You need to rearrange the way you have applied the classes to the paragraphs.

.col {
  -webkit-column-gap: 15px;
  -moz-column-gap: 15px;
  column-gap: 15px;
}

.column-2 {
  -webkit-columns: 2;
  -moz-columns: 2;
  columns: 2;
}

.text-justify {
  text-align: justify;
}

p:first-child {
  margin-top: 0;
}

<div class="text-justify col column-2">
  <p>Prime Minister Narendra Modi spoke to Andhra Pradesh Chief Minister N Chandrababu Naidu, a day after the TDP chief decided to pull out of the NDA government at the Centre.</p>
  <p class="column-2">According to official sources, the two Union ministers from the TDP quota will meet the prime minister at 6 pm todayAccording to official sources, the two Union ministers from the TDP quota will meet the prime minister at 6 pm todayAccording to official
    sources, the two Union ministers from the TDP quota will meet the prime minister at 6 pm todayAccording to official sources, the two Union ministers from the TDP quota will meet the prime minister at 6 pm todayAccording to official sources, the two
    Union ministers from the TDP quota will meet the prime minister at 6 pm todayAccording to official sources, the two Union ministers from the TDP quota will meet the prime minister at 6 pm todayAccording to official sources, the two Union ministers
    from the TDP quota will meet the prime minister at 6 pm todayAccording to official sources, the two Union ministers from the TDP quota will meet the prime minister at 6 pm todayAccording to official sources, the two Union ministers from the TDP quota
    will meet the prime minister at 6 pm todayAccording to official sources, the two Union ministers from the TDP quota will meet the prime minister at 6 pm todayAccording to official sources, the two Union ministers from the TDP quota will meet the prime
    minister at 6 pm today</p>
</div>

[`column-span`](https://developer.mozilla.org/en-US/docs/Web/CSS/column-span) does not take a number as argument. — Just a student, Mar 08 '18 at 15:31
You should also ensure that the first paragraph should consist of two columns. — Just a student, Mar 08 '18 at 15:32
You are right! column-span was not required. Also, looking at the pic, I don't think he wants the first paragraph to consist of two columns. — Rocks, Mar 08 '18 at 15:37
Ah, I think you're right. In that case, the `column-count: 1` is unnecessary too :-) — Just a student, Mar 08 '18 at 15:39

Just a student · Answer 3 · 2018-03-08T16:02:44.607

You can do this using a multi-column layout, but only because the total number of columns is a multiple of the number of columns the first paragraph spans.

The trick is to create a wrapper with 2 columns, in which the two paragraphs are put. Then have both paragraphs again have 2 columns (or only the second one, if you want the first paragraph to have a single column). This works only because the numbers work out: it won't work in general, for example for 5 columns and having the first paragraph span 2. It looks like CSS is not quite powerful enough for the general case yet. (Although, as per Vince's answer, we're getting there with CSS Regions.)

Here is a little demonstration of your use case (4 columns, first paragraph spans 2).

p {
  margin: 0 0 1.4rem;
  padding: 0;
  line-height: 1.4rem;
  text-align: justify;
}

.wrapper {
  column-count: 2;
  column-gap: 2rem; /* gap in the middle */
}

.first {
  font-style: italic;
}

.second {
  width: 100%;
  column-count: 2;
  column-gap: 2rem; /* gap in second paragraph */
}

<div class="wrapper">
  <p class="first">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non enim ac risus facilisis tincidunt. Fusce libero sem, dignissim eu condimentum sodales, condimentum quis eros. Mauris nec scelerisque justo.
  </p>
  <p class="second">
    In malesuada efficitur urna, non mattis enim. Curabitur eleifend, mauris sed semper consectetur, sapien ipsum posuere justo, vitae tincidunt sem risus nec quam. Aenean quis sollicitudin turpis. Donec sit amet nisi ultricies, pharetra purus nec, varius
    erat. Cras et sagittis eros. Maecenas aliquam libero in arcu ullamcorper, ut feugiat nibh sagittis. Integer ut orci et magna sollicitudin porttitor. Vestibulum efficitur urna non dui tristique vulputate. Pellentesque finibus mattis libero at ultrices.
    Vivamus eget risus massa. Suspendisse potenti. Proin vel lectus elementum, finibus ipsum vitae, vulputate ligula. Aenean commodo laoreet eleifend. Donec finibus, magna vitae lobortis fringilla, ex nunc feugiat eros, at imperdiet orci ante et orci.
    Duis in mi dui.
  </p>
</div>

And here's a version where the first paragraph has two columns as well.

p {
  margin: 0 0 1.4rem;
  padding: 0;
  line-height: 1.4rem;
  text-align: justify;
}

.wrapper {
  column-count: 2;
  column-gap: 2rem; /* gap in the middle */
}

.first {
  column-count: 2;
  column-gap: 2rem; /* gap in first paragraph */
  font-style: italic;
}

.second {
  width: 100%;
  column-count: 2;
  column-gap: 2rem; /* gap in second paragraph */
}

<div class="wrapper">
  <p class="first">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non enim ac risus facilisis tincidunt. Fusce libero sem, dignissim eu condimentum sodales, condimentum quis eros. Mauris nec scelerisque justo.
  </p>
  <p class="second">
    In malesuada efficitur urna, non mattis enim. Curabitur eleifend, mauris sed semper consectetur, sapien ipsum posuere justo, vitae tincidunt sem risus nec quam. Aenean quis sollicitudin turpis. Donec sit amet nisi ultricies, pharetra purus nec, varius
    erat. Cras et sagittis eros. Maecenas aliquam libero in arcu ullamcorper, ut feugiat nibh sagittis. Integer ut orci et magna sollicitudin porttitor. Vestibulum efficitur urna non dui tristique vulputate. Pellentesque finibus mattis libero at ultrices.
    Vivamus eget risus massa. Suspendisse potenti. Proin vel lectus elementum, finibus ipsum vitae, vulputate ligula. Aenean commodo laoreet eleifend. Donec finibus, magna vitae lobortis fringilla, ex nunc feugiat eros, at imperdiet orci ante et orci.
    Duis in mi dui.
  </p>
</div>

Have a paragraph flow around another paragraph, in 4 columns

3 Answers3