I am trying to format html to have text formatted by 2 columns. I am trying to do it as following :

.content {
    column-count: 2;
    column-gap: 10px; /* Space between the columns */
}
body {
  counter-reset: section;      
}
p:before {
  counter-increment: section;        
  content: "" counter(section) ": "; 
}

<div class="content"> 
  <p>this is the first paragraph of text.</p>
  <p>this is the second paragraph of text.</p>
  <p>this is the third paragraph of text.</p>
  <p>this is the fourth paragraph of text.</p>
  <p>this is the fifth paragraph of text.</p>
  <p>this is the sixth paragraph of text.</p>
</div>

I am trying to format html to have text formatted by 2 columns. I am trying to do it as following :

.content {
    column-count: 2;
    column-gap: 10px; /* Space between the columns */
}
body {
  counter-reset: section;      
}
p:before {
  counter-increment: section;        
  content: "" counter(section) ": "; 
}

<div class="content"> 
  <p>this is the first paragraph of text.</p>
  <p>this is the second paragraph of text.</p>
  <p>this is the third paragraph of text.</p>
  <p>this is the fourth paragraph of text.</p>
  <p>this is the fifth paragraph of text.</p>
  <p>this is the sixth paragraph of text.</p>
</div>

But when I open this file in browser I see that text splits in 2 columns but lines between 2 columns are not aligned vertically (as it can be seen in screenshot): .

What I need to do - is that line #1 in line#4 on the sample page will be on same height. Tried to use flex but it causes to that text is splits by more than 2 columns. What is missing in the styling ? Thanks in advance

• html
• css

Share Follow edited Mar 10 at 7:23 Deeksha 58866 silver badges1414 bronze badges asked Mar 7 at 19:34 lm.lm. 4,31344 gold badges2828 silver badges4444 bronze badges 4

• 1 Have you used a css reset? Looks like a margin issue on the paragraphs. – Paulie_D Commented Mar 7 at 19:40
• remove the default margin or using display:inline-block with the p elements – Temani Afif Commented Mar 7 at 20:00
• As @Paulie_D commented, it seems to be a margin issue; try adding this to your css: .content p:first-child { margin: 0; } – SoftwareDveloper Commented Mar 7 at 20:13
• Thanks for quick replies - settijng margin to 0 helped – lm. Commented Mar 8 at 5:14

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 3

Remove the default margin-top of the paragraph elements:

p {
  margin-top: 0;
}

.content {
  column-count: 2;
  column-gap: 10px;
  /* Space between the columns */
}

body {
  counter-reset: section;
}

p:before {
  counter-increment: section;
  content: "" counter(section) ": ";
}

<div class="content">
  <p>this is the first paragraph of text.</p>
  <p>this is the second paragraph of text.</p>
  <p>this is the third paragraph of text.</p>
  <p>this is the fourth paragraph of text.</p>
  <p>this is the fifth paragraph of text.</p>
  <p>this is the sixth paragraph of text.</p>
</div>