CODEWITHSUNDEEP
csslayoutresponsive-designcss-multicolumn-layout
Neil S3ntence
Neil S3ntence

Reputation: 194

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

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.

Upvotes: 0

Views: 1634

Answers (1)

ian m
ian m

Reputation: 514

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!

Upvotes: 2

Related Questions