CODEWITHSUNDEEP
htmlcss
JosephStyons
JosephStyons

Reputation: 58735

Vertical alignment for columns of text when using the column-count css tag?

I am using the CSS column-count tag to divide some text up into four columns on an HTML page.

The first column is vertically always a little bit lower than the other three.

I've boiled it down to the simplest possible example, which you can see below, or in this JSFiddle.

Why does the first column have extra space at the top? How do I get them to align?

.column-text{
  column-count: 4;
  column-gap: 10px;
  column-rule: 1px dotted #d5d5d5;
  font-size: large;
}
<div class="column-text">
  <div>
    <p>Why am I lower</p>
    <p><i>Blah blah blah</i></p>
  </div>
  <div>
    <p>Blah blah</p>
    <p><i>Blah blah blah</i></p>
  </div>
  <div>
    <p>Blah blah</p>
    <p><i>Blah blah blah</i></p>
  </div>
  <div>
    <p>Blah blah</p>
    <p><i>Blah blah blah</i></p>
  </div>
</div>

Upvotes: 4

Views: 2169

Answers (3)

K Nugal
K Nugal

Reputation: 134

In js fiddle it looks like the margins of the other ones are sort of overlapping the parent container.

You could try this

.column-text p {
  display: inline-block;
}

this should make them all look the same

Upvotes: -1

Andrei Fedorov
Andrei Fedorov

Reputation: 3987

This is a vertical margin of <p> tags. In other cases, they collapse - this is the standard behavior of margin.

Upvotes: 0

tacoshy
tacoshy

Reputation: 13012

There is a margin added at the first paragraph. you can remove it by adding this line to the CSS: .column-text div:first-child p:first-child { margin: 0; }

.column-text{
  column-count: 4;
  column-gap: 10px;
  column-rule: 1px dotted #d5d5d5;
  font-size: large;
}

.column-text div:first-child p:first-child {
  margin: 0;
}
<div class="column-text">
  <div>
    <p>Why am I lower</p>
    <p><i>Blah blah blah</i></p>
  </div>
  <div>
    <p>Blah blah</p>
    <p><i>Blah blah blah</i></p>
  </div>
  <div>
    <p>Blah blah</p>
    <p><i>Blah blah blah</i></p>
  </div>
  <div>
    <p>Blah blah</p>
    <p><i>Blah blah blah</i></p>
  </div>
</div>

Upvotes: 3

Related Questions