CSS3 columns in Chrome with child DIV elements

Question

I'm having trouble with CSS3 columns, they don't work as I would have expected in Chrome 53.0.2785 - they work as I'd expect in Firefox 49, IE11, EDGE 38.14393

The first two child DIVs of my "container" DIV display under each other in Chrome, but next to each other in Firefox

HTML:

<div class="container">
  <div>
    Some content 1
  </div>
  <div>
    Some content 2
  </div>
</div>

CSS:

* {
  box-sizing: border-box;
}
.container {
  column-width: 100px;
  column-gap: 12px;
}
.container > div {
  display: inline-block;
  width: 100px;
  border: 1px solid black;
  padding: 20px;
}

Test it here: https://jsfiddle.net/s7cfbqzt/3/

Now, there's a few strange things happening in Chrome:

if I only remove "display: inline-block", Chrome breaks up the DIVs (even the border gets distributed) - Firefox does not
- Please note that I can't set column-count in the parent (which in combination with removing inline-block seems to kind-of-work) as it's supposed to be a fluid layout. The height of each DIV is dynamic as well, so if that's a requirement I'd have to write some JS for this (but I'd prefer to have this working without JS).
if I remove border-sizing and all properties of the child DIVs it works as expected, but as soon as I start filling the inner DIVs with some other content (that might have border or paddings or box-shadows), it breaks again

If I add a third child DIV

<div>Some content 3</div>

there will be columns in Chrome, but is displayed as

1..3
2

A fourth DIV would then be display underneath DIV3, a fifth DIV in the first "row" again.

1..3..5
2..4

Is this a bug in Chrome or am I doing something wrong?

score 2 · Accepted Answer · answered Nov 15 '16 at 14:51

Chrome is actually probably the one browser doing it correctly:

https://drafts.csswg.org/css-break/#widows-orphans

Name:   orphans, widows
Value:  <integer>
Initial:    2

IE 11, EDGE and Firefox (49) do not (yet?) support widows and orphans, even though http://caniuse.com/#feat=css-widows-orphans claims that IE11 and EDGE do support it - see https://jsfiddle.net/s7cfbqzt/13/ in IE11 and EDGE. If IE and EDGE actually would support it, they'd set the initial values to 1 instead of 2.

Fix for my use-case is to add

orphans: 1;
widows: 1;

to the container-class in CSS.

Thanks @Jay for taking the time to look into this!

score 1 · Answer 2 · edited Feb 16 '17 at 09:55

1

You can achieve this by floating the divs within the container, you will also need to float their container, or they won't display correctly.

* {
  box-sizing: border-box;
}
.container {
  column-width: 100px;
  column-gap: 12px;
float: left;
}
.container > div {
  display: inline-block;
  width: 100px;
  border: 1px solid black;
  padding: 20px;
float: left;
}

EDIT:

then instead of using column-gap, i would apply margin left to each of the divs inside the container. like so;

.container {
    width: 100%;
    float: left;
    }
    .container > div {
      width: 100px;
      border: 1px solid black;
      padding: 20px;
    float: left;
margin-left: 12px;
    }
.container > div:first-child {
margin-left: 0;
}

EDIT:

If the height does not need to match - remove column-width from the container div. see https://jsfiddle.net/0sz6t3ft/1/

edited Feb 16 '17 at 09:55

marc_s

732,580
175
1,330
1,459

answered Nov 11 '16 at 12:21

Jay

772
1
6
17

Thanks, unfortunately this does not really work, see https://jsfiddle.net/s7cfbqzt/4/ in Chrome (with or without box-sizing) – ripper17 Nov 11 '16 at 12:53
It did work until the extra content was added, let me re style. One moment i will update my answer accordingly. Am i correct in assuming you wish these boxes all to have the same height? – Jay Nov 11 '16 at 13:32
Thanks for the second edit - maybe I was too unspecific in my initial question. Using display: table is also not an optionas it will not break any DIV to a second row (resize the columns in jsfiddle). The DIVs have dynamic content and _will not_ have the same height. Generally speaking, the column layout works best - but "only" in IE, Firefox, EDGE - not in Chrome or Chromium-based browsers. I will have a look at flex-box again, I remember there being an issue as well, but I don't have an example at hand. – ripper17 Nov 11 '16 at 13:40
Does the height need to match? – Jay Nov 11 '16 at 13:41
Sorry I sent the previous comment to early, see the updated comment (I'm still new to Stack Overflow and tried to insert a line break in the comment, which is not possible, I guess, as it simply submits the comment?) – ripper17 Nov 11 '16 at 13:45
I have updated my answer, so its very clean. Please see my js fiddle, as the boxes do not need to match height i think my solutions is best for you. – Jay Nov 11 '16 at 13:47
Is this solution suitable? If so please accept my answer :) – Jay Nov 11 '16 at 14:32
Floating is not really an option, please see the updated (more complete) https://jsfiddle.net/s7cfbqzt/11/ The boxes colored green are displayed nicely in Firefox (just as expected) but not Chrome, the boxes colored red are displayed using float. The heights of the DIVs are more or less random, because they'll be dynamic in the end. Flex-box will also not give the same nice layout that columns does (in Firefox) but will be closer to the float-layout. I'm getting more and more convinced that Chrome is doing something strange (buggy) here, but I 'd still like to get CSS3-columns to work. – ripper17 Nov 14 '16 at 09:19
Here's another update with columns, float and flex https://jsfiddle.net/s7cfbqzt/12/ - please compare the boxes in Firefox (or IE, EDGE) with Chrome. The variant with columns (green DIVs) in Firefox (IE, EDGE) is the desired result. – ripper17 Nov 14 '16 at 09:40

CSS3 columns in Chrome with child DIV elements

2 Answers2