Extra space beneath CSS column layout

Question

I have a 2 column CSS-only grid which works, however it causes excess space beneath both columns.

screenshot .

If I remove inline-block from each cell the excess space is not so bad however this is needed to prevent the grid wrapping. I presumed the issue was with vertical-align, adding this appears to have made no difference though. Is there any way of preventing this excess space?

.columns {
    -webkit-column-gap: 1.5em;
    -moz-column-gap: 1.5em;
    column-gap: 1.5em;
    -webkit-column-fill: auto;
    -moz-column-fill: auto;
    column-fill: auto;

}

.columns__cell {
    break-inside: avoid-column;
    column-break-inside: avoid;
    display: inline-block;
    vertical-align: top;
    width: 100%;
}

.columns--2 {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
}

Structure:

<div class="column column--2">
    <!-- repeated -->
    <div class="widget__item poll column__cell">
        <div class="widget__head clearfix">
            ***
        </div>
        <div class="widget__body">
            ***
        </div>
    </div> 
    <!-- repeated -->
</div>

Can't you see the extra space under the columns there @LorenzoMarcon? Look at all the whitespace. To the OP, just resize your browser up a bit, the space will go away :-) — Joe, Sep 24 '14 at 12:37
of course I can see it, but with some markup it'd be easier to help and make some testing — Lorenzo Marcon, Sep 24 '14 at 12:39
Ah, being silly doesn't translate to text too well. I keep forgetting — Joe, Sep 24 '14 at 12:40
@Joe :) I love British humor, but you're right. Sometimes I just don't get it on text! — Lorenzo Marcon, Sep 24 '14 at 12:44
The code you added is not enough to replicate the problem. Try making an example on jsfiddle.net that shows the actual problem — Stephan Muller, Sep 24 '14 at 22:01

score 1 · Answer 1 · answered Feb 05 '15 at 04:28

I would use the float property. .inner is the container in which you nest colLeft and colRight. This should fix your problem.

.inner {
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
    margin: 0 auto;
    width: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.colRight {
    float: left;
    width: 50%;
}
.colLeft {
    padding-right: 10%;
    float: right;
    width: 50%;
}

Extra space beneath CSS column layout

1 Answers1

Linked