CSS columns and margin issue

Question

Update: The latest code which works in all browsers is located in this JSFiddle

I am trying to make responsive columns using pure CSS approach.

I have an issue where columns sometimes have gap/margin at the top.

(old) JSFiddle link to try and explore

How to solve it?

CSS:

.fx-columns {
  background: yellow;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 30px;
    -moz-column-gap: 30px;
    column-gap: 30px;
}

.fx-columns-3 {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}

.fx-columns-4 {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
}

.fx-columns .fx-column {
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
  background: pink;
  clear: both;
  margin-bottom: 20px;
}

HTML:

<div class="fx-columns fx-columns-4">
  <div class="fx-column">
    <h3>Header</h3>
    <p>Text paragraph</p>
  </div>
  <div class="fx-column">
    <h3>Header</h3>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
  </div>
  <div class="fx-column">
    <h3>Header</h3>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
  </div>
  <div class="fx-column">
    <h3>Header</h3>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
  </div>
  <div class="fx-column">
    <h3>Header</h3>
    <p>Text paragraph</p>
  </div>
  <div class="fx-column">
    <h3>Header</h3>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
  </div>
  <div class="fx-column">
    <h3>Header</h3>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
  </div>
  <div class="fx-column">
    <h3>Header</h3>
    <p>Text paragraph</p>
  </div>
  <div class="fx-column">
    <h3>Header</h3>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
  </div>
  <div class="fx-column">
    <h3>Header</h3>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
  </div>
</div>

Supplicate

That is caused by collapsing margins on your h3 tags, and this will undo that: .fx-columns .fx-column { overflow: auto; } ... or like this .fx-columns .fx-column h3 { margin-top: 0; } ... or like this .fx-columns .fx-column { display: inline-block; } – Lawford

Possible duplicate of What does `overflow:hidden` do in the following example? – Lawford

The display: inline-block; will make columns not responsive. – Supplicate

Ok, might be, didn't test that, I added it as it resets the collapsed margins ... luckily you still have to more options :) – Lawford

Answer 1

Currently, you're keeping the content from breaking between columns. However, the browser breaks the margin between columns, which is causing some of the columns to not start at the top.

Add this to your css:

.fx-column {
  display: inline-block;
}

You'll then have to give the columns a fixed width.

Know, however, that there are a lot of issues with using the column count css property. See this article for more information.

Edit: If you want the column widths to be responsive, you can simply set them to width: 100% so that they expand as the browser expands.

Endocranium

The display: inline-block; will make columns not responsive. – Supplicate

You can set width: 100% and the columns will expand like they do without being display: inline-block. I'll add that to my answer. Thanks for the input – Endocranium

Thanks. Your approach is working great in all browsers. jsfiddle.net/webvitaly/yu00ugft/5 – Supplicate

this solution makes another issue that 3 cols are displayed as 2 – Misti

Answer 2

You can set top-margin and top-padding to zero to solve this problem. You can use CSS universal (*) selector:

*{padding-top:0; margin-top:0;}

But remember universal selector styles will be applied to entire page.

Cagle

What if I need a margin and padding for .fx-column, h3 and p tags? – Supplicate

just add "display: inline-block;" in fx-column like jtmingus said. – Cagle

Just use .fx-column > * to address only direct child elements of .fx-column. In my case this was a viable solution. – Drosophila

@Drosophila doesnt work – Misti