How to prevent starting a new CSS column until necessary?

Question

How can I have a fixed column layout but get the text to vertically fill out the columns before starting on the next. In other words (screenshot from chrome);

enter image description here

The trouble is, when I specify 5 columns it spreads even a single line that would fit perfectly into one column across as many as it can.

not this

I can't seem to get it to do the 'sensible' thing. I don't want to change the number of columns dynamically I want to be able to do this with pure CSS. Fill the first column up first before moving on to the second, and then third and so on.

Is it possible? Here's what I'm using so far;

.content{
-webkit-column-count: 5;
-moz-column-count: 5;
-ms-column-count: 5;
-o-column-count: 5;
column-count: 5;

-webkit-column-gap: 20px;
-moz-column-gap: 20px;
-ms-column-gap: 20px;
-o-column-gap: 20px;
column-gap: 20px;
}

Fiddle

http://stackoverflow.com/questions/6424088/css-column-breaks Answer #3 by Joe seems to address this. All the documentation I can find suggests that column breaking isn't well supported yet or that you should use a wrapper. — Andrew Clody, Aug 05 '13 at 15:31
Thanks. I don't think it's quite the same problem though. The issue with that approach is that it forces me to break the columns myself. I might as well just set the column count if I know where the breaks are supposed to go. http://jsfiddle.net/WhkK5/ — cirrus, Aug 05 '13 at 15:41
I don't feel like that's what columns are really for. You're trying to flow text downward, after telling it to break into columns, hence the need for a wrapper. The renderer deems the column as "full", and breaks into another, especially when using a % width. Makes sense to me. — Andrew Clody, Aug 05 '13 at 15:56

score 2 · Answer 1 · answered Aug 05 '13 at 15:32

2

If you wrap your content in <p> or something similar and apply the break-inside to that, it works: http://jsfiddle.net/26NGr/1/

.content p {
    margin: 0;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
}

answered Aug 05 '13 at 15:32

kalley

18,072
2
39
36

Thanks. unfortunately that breaks the large text version. – cirrus Aug 05 '13 at 15:33
Can you use javascript? I might be able to come up with a solution that would just add a class if the text is short enough. – kalley Aug 05 '13 at 15:43
I want to try and achieve it without JS if possible. I think the key to it is the columns need a height as per my other answer. If I can get the height set correctly I think it should work out of the box. – cirrus Aug 05 '13 at 16:08
Hope you find an answer. I tried setting `min-height` and it seems like it just changes the `height` on all of the `.content` elements, not the `min-height`. – kalley Aug 05 '13 at 16:11
Yeah, I couldn't get min-height to work either. I have an updated answer that seems to work tho. thanks. – cirrus Aug 05 '13 at 16:44

score 2 · Answer 2 · edited Jun 20 '20 at 09:12

I can get it to sort of work with the following CSS;

column-fill:auto; /* not supported in chrome, but appears to be the default */
height:100px;

It doesn't work however with % sizes. I would have to use a fixed px size which I cannot do.

update

However, this solution works with relative sizes and seems to work in latest Chrome, IE, FF and Safari.

Using the padding-bottom trick I managed to set a relative height for the wrapper container;

.wrapper {
    padding-bottom:10%; /* spacer - this is my relative height */
    background-color:lightblue;
    position:relative; /* abs coord stop here */
}

With this;

<h1>short test</h1>
<div class="wrapper">
   <div class="content">
   The quick brown fox jumps over the lazy dog.
   </div>
</div>

Then I can do this;

.content{
    -webkit-column-count: 5;
    -moz-column-count: 5;
    -ms-column-count: 5;
    -o-column-count: 5;
    column-count: 5;

    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    -ms-column-gap: 20px;
    -o-column-gap: 20px;
    column-gap: 20px;

    column-fill:auto;

    position:absolute;
    top:0;
    left:0;
    height:100%; /* fill wrapper container */
    width:100%;

    background-color:lightgray;
}

The trade-off is that if I have too much content it will keep adding columns horizontally beyond the 5 I requested. It won't expand downwards, but I guess that actually makes sense.

How to prevent starting a new CSS column until necessary?

2 Answers2

update

Linked