add a min-height to CSS3 multi-columns

There is no minimum height, but the minimum number of lines at the end of a paragraph on their own at the start of a column are called orphans (and the opposite... lines on their own at the start of a paragraph is widows). These are CSS properties which columns should honour according to the spec, but I've done a quick test in Chrome and it doesn't make any difference. So I guess we have to wait for this to be implemented.

An example of how it should be set up:

p.columns {
    column-count: 2;
    orphans: 3
}

I know, this is an old one. But during my research this thread came up first, so I better share my results. There is a partial supported attribute called column-fill which does, what you and I was looking for. Partial means, you should use browser-specific prefixes...

column-count: 2;
column-width: auto;
column-fill: auto;

Here are the MDN Docs

Tags:

Css