Click here to Skip to main content
15,900,461 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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:



What I have tried:


Edit fiddle - JSFiddle[^]

CSS
.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;
}


HTML
<pre><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>
Posted
Updated 9-Mar-18 3:18am
v5

The answer to all of your questions lies here[^] and here[^]


 
Share this answer
 
Values:
none
The element does not span multiple columns.
all
The element spans across all columns. Content in the normal flow that appears before the element is automatically balanced across all columns before the element appears. The element establishes a new block formatting context.

The value 2 is not valid for the column-span property.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900