CSS Columns will not horizontally align

Question

I am using column count to allow my text to flow into two different columns but the top of the first column (leftmost) is lower than the other column?

#col {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
}

<div id="col">
  <h3>
    Options
  </h3>
  <h3>
    Features and Benefits
  </h3>
  <h3>
    Specifications
  </h3>
  <h3>
    hey
  </h3>
  <h3>
    30 Years Experience
  </h3>
</div>

I have included a limited section of the code, and even when I fill it with text, there is still a difference in the top of the columns.

It's always nice to give more information on the browser you use — David Bensoussan, Jul 11 '17 at 13:15
FireFox applies vertical margin collapsing in the first column, and gets confused in the second. See: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing — biziclop, Jul 11 '17 at 13:19
@Ronan Garrison, which answer you marked?you test it?it is wrong. — Ehsan, Jul 11 '17 at 13:43

Ehsan · Answer 1 · 2017-07-11T13:09:29.010

3

Use :

#col h3 {
  margin-top: 0;
}

#col {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
}

#col h3 {
  margin-top: 0;
}

<div id="col">
  <h3>Options</h3>
  <h3>Features and Benefits</h3>
  <h3>Specifications</h3>
  <h3>hey</h3>
  <h3>30 Years Experience</h3>
</div>

edited Jul 11 '17 at 13:09

answered Jul 11 '17 at 13:02

Ehsan

12,655
3
25
44

score 3 · Answer 2 · answered Jul 11 '17 at 13:02

Just a bit of CSS:

CSS:

#col {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
  position:relative;
}
h3{display:inline-block;width:100%;}
// Best would be #col > * , because all direct children must be affected.

HTML:

<div id="col">
    <h3>
        Options 
    </h3>
    <h3>
        Features and Benefits
    </h3>
    <h3>
        Specifications
    </h3>
    <h3>
        hey
    </h3>
    <h3>
        30 Years Experience
    </h3>
    </div>

Snippet:

#col {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
  position:relative;
}
h3{display:inline-block;width:100%;}

<div id="col">
    <h3>
        Options 
    </h3>
    <h3>
        Features and Benefits
    </h3>
    <h3>
        Specifications
    </h3>
    <h3>
        hey
    </h3>
    <h3>
        30 Years Experience
    </h3>
    </div>

THANK YOU! After all the stuff I saw lying around, this is the one that did it, specifically the second rule. CSS can really be quirky. I'm sorry I could only vote this up once. — Ricardo, May 05 '22 at 12:33

score 2 · Accepted Answer · answered Jul 11 '17 at 13:03

2

  #col{
     margin-top:0px;
  }
  #col h3{
      display:inline-block;
      vertical-align:top; // middle or bottom
  }

answered Jul 11 '17 at 13:03

Wordica

2,427
3
31
51

score 1 · Answer 4 · answered Jul 11 '17 at 13:06

The fact that h3 elements have a margin-top by default, caused this problem. Removing the margin fixes it, as seen in the snippet below.

#col {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
}
h3 {
  margin-top: 0;
  }

<div id="col">
  <h3>
    Options
  </h3>
  <h3>
    Features and Benefits
  </h3>
  <h3>
    Specifications
  </h3>
  <h3>
    hey
  </h3>
  <h3>
    30 Years Experience
  </h3>
</div>

score 0 · Answer 5 · answered Jul 11 '17 at 13:05

Just remove the top margin from the h3 element

#col {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
}

h3 {
  margin-top: 0;
}

<div id="col">
  <h3>
    Options
  </h3>
  <h3>
    Features and Benefits
  </h3>
  <h3>
    Specifications
  </h3>
  <h3>
    hey
  </h3>
  <h3>
    30 Years Experience
  </h3>
</div>

CSS Columns will not horizontally align

5 Answers5

Linked