13

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>
Glorfindel
  • 21,988
  • 13
  • 81
  • 109
webvitaly
  • 4,241
  • 8
  • 30
  • 48
  • 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; }` – Asons Jun 24 '16 at 19:28
  • Possible duplicate of [What does \`overflow:hidden\` do in the following example?](http://stackoverflow.com/questions/37958873/what-does-overflowhidden-do-in-the-following-example) – Asons Jun 24 '16 at 19:31
  • The `display: inline-block;` will make columns not responsive. – webvitaly Jun 24 '16 at 20:07
  • Ok, might be, didn't test that, I added it as it resets the collapsed margins ... luckily you still have to more options :) – Asons Jun 24 '16 at 20:09

2 Answers2

22

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.

jtmingus
  • 804
  • 5
  • 10
-1

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.

Hussain Rauf
  • 278
  • 2
  • 15