How to avoid blank lines at the top of new column (CSS columns)?

Question

My problem is with the CSS column property. I remembered there's a way to prevent blank (<br>) lines to end up as the right column's first, row but I can't seem to figure it out.

The CSS that creates the column-effect:

@media (min-width: 1100px) {
    .inner_p, .introtext p {
        column-count: 2;
        break-after: auto;
        column-gap: 3em;
    }
}

The HTML:

<p>With an article, and a couple <br><br>s inside. These <br>s are IMO what sometimes shows up as first element in the right column, causing the following appearance:</p>

xxxxxxx < br >
xxxxxxx xxxxxx
xxxxxxx xxxxxx
xxxxxxx xxxxxx

This looked kind of messy!

What I would want to achieve is:

xxxxxxx xxxxxx
xxxxxxx xxxxxx
xxxxxxx xxxxxx
xxxxxxx

I've already accepted Ian M's answer because it definitely put me on the right track, however, one minor problem remains:

Everything is good when the first-child p ends right at the bottom of the left col. But when it extends into the right column, it continues (correctly) at the top of the column, but (and this is the minor glitch) due to its margin-bottom:0 (to prevent a blank first row in case of a first p that ends right at the bottom of the left col), it now doesn't have a margin to the following, second p.

Visually speaking:

1st p : aaa 2nd p: bbb

aaaaa bbbbb
aaaaa bbbbb
aaaaa ...
√

but

aaaaa aaaaa
aaaaa bbbbb
aaaaa bbbbb
No margin between a and b!

A conundrum.

Please post relevant html/css – BrainHappy May 19 '16 at 13:33 — BrainHappy, May 19 '16 at 13:33
done, with a little illustration, hope it helps! – Neil S3ntence May 23 '16 at 11:24 — Neil S3ntence, May 23 '16 at 11:24

score 2 · Accepted Answer · answered May 23 '16 at 14:51

I think a better way to accomplish this would be to refactor your code so that each paragraph is its own <p>. I'd recommend putting all of them into a parent <div> that has the column and break CSS.

Then, all you have to do is give the first paragraph zero margin-top, so it sits flush with the second column. Here's what I mean:

body { width: 90vw; margin: 2vw; }
.parent {
    column-count: 2;
    break-after: auto;
    column-gap: 3em;
 
    /* for testing */ 
 padding: 15px;
 border: 1px solid red;
}
.parent > p {
    /* for testing */ 
 border: 1px solid blue;
}
.parent > p:first-child {
 margin-top: 0;
}

<div class='parent'>
 <p>A look at Mrs. Clinton’s speaking venues and the whopping sums she’s received since she left State gives us an indication who’s desperate for a place at the trough — and whom another Clinton administration might favor.</p>
 <p>First off, there’s Wall Street and the financial-services industry. Democratic champions of the Little Guy are always in bed with the Street — they don’t call Barack Obama “President Goldman Sachs” for nothing, but Mrs. Clinton has room for Bob and Carol and Ted and Alice and their 10 best friends. Multiple trips to Goldman Sachs. Morgan Stanley. Deutsche Bank. Kohlberg Kravis Roberts. UBS Wealth Management.</p>
 <p>As the character of Che Guevara sings in “Evita”: “And the money kept rolling in.” And all at the bargain price of $225,000 a pop . . . to say what? We don’t know, because Hillary won’t release the transcripts.</p>
</div>

I added borders so you can see what's going on. Hope this helps, good luck!

Haha I see what you did there! Great answer & totally implementable. Will try that now. Thank you for your time!!! — Neil S3ntence, May 23 '16 at 15:32
Oh, I had to change the first-child paragraph to margin-bottom:0 and all other p's to margin-top:0 to avoid these unwanted breaks but it works now and you definitely set me on the right track, -> accepted answer — Neil S3ntence, May 23 '16 at 17:29

How to avoid blank lines at the top of new column (CSS columns)?

1 Answers1