CSS column fill balance with text alignment on the bottom

Question

I've been trying to find a solution to my problem online but with no luck. So I have html page with printing style column. So what I want is the text on 3 columns but the text need to be bottom aligned. I can easily achieve this with css column-fill: balance; with simple text as the descendant. As soon as I have multiple elements as the content (plus with margin or padding) the text become out of balance. How can I solve this or is there any other solution to this problem?

.multicol {
  background-color: beige;
  padding: 10px;
  column-count: 3; 
  column-rule: 2px dotted coral;
  column-fill: balance;
}
p {
  padding: 0;
  margin: 0;
}
h1 {
  padding: 0;
  margin: 0 0 8px;
  // if I set this to zero the text is balanced to the bottom. This effect is what I am looking for
  // margin: 0;
}

<div class="multicol">
  <div>
  <h1>Some text</h1>
  <p>Grant Shapps said people should only go to countries on the "amber" list in "exceptional circumstances", amid concern over the Indian Covid variant.</p>
<p>The boss of airline EasyJet said people were "confused" by the system.</p>
<p>Ministers say they can carry out 10,000 checks a day in England to ensure travellers self-isolate..</p>
  </div>
</div>

Your text will be out of balance depending on your column's width and content inside, You may try to reset line-height values to any tag inside to balance equally the lines text and tags (p,h1,h2,..) uses. — G-Cyrillus, May 20 '21 at 11:49

G-Cyrillus · Accepted Answer · 2021-05-20T13:07:35.537

You may take a look at line-height , so any element can use a full amount of lines based on the same value.

Let's say, 1.5rem for a reference.

It could be then :

.multicol {
  background-color: beige;
  padding: 10px;
  column-count: 3;
  column-rule: 2px dotted coral;
  column-fill: balance;
  line-height: 1.5rem;
  background-image:repeating-linear-gradient(to bottom, transparent 0 1.4rem, lightgray 1.45rem 1.5rem);/*show me */
  background-position:0 10px;
}

p,
h1,
h2 {
  padding: 0;
  margin: 0;
}

h1 {
  line-height: 3rem;
}

<div class="multicol">
  <div>
    <h1>Some text</h1>
    <p>Grant Shapps said people should only go to countries on the "amber" list in "exceptional circumstances", amid concern over the Indian Covid variant.</p>
    <p>The boss of airline EasyJet said people were "confused" by the system.</p>
    <p>Ministers say they can carry out 10,000 checks a day in England to ensure travellers self-isolate..</p>
  </div>
</div>
<hr>
<div class="multicol">
  <div>
    <h1>Some text</h1>
    <p>Grant Shapps said people should only go to countries on the "amber" list in "exceptional circumstances", amid concern over the Indian Covid variant.</p>
    <p>The boss of airline EasyJet said people were "confused" by the system.</p>
    <h2>title level 2</h2>
    <p>Ministers say they can carry out 10,000 checks a day in England to ensure travellers self-isolate..</p>
    <p>Grant Shapps said people should only go to countries on the "amber" list in "exceptional circumstances", amid concern over the Indian Covid variant.</p>
    <p>Grant Shapps said people should only go to countries on the "amber" list in "exceptional circumstances", amid concern over the Indian Covid variant.</p>
    <p>The boss of airline EasyJet said people were "confused" by the system.</p>
    <h2>title level 2</h2>
    <p>Ministers say they can carry out 10,000 checks a day in England to ensure travellers self-isolate..</p>
    <p>The boss of airline EasyJet said people were "confused" by the system.</p>
    <h2>title level 2</h2>
    <p>Ministers say they can carry out 10,000 checks a day in England to ensure travellers self-isolate..</p>
  </div>
</div>

Ah thanks, that fixes my issue. Although your example is not aligned to the bottom properly. You missed the line height on `h2`. But I got the idea. Cheers :) — Tom Marulak, May 20 '21 at 13:09
@TomMarulak line-height on h2 can be reset to 3rem if you wish :) To help you tune line-height and understand how font-sizing works, see https://stackoverflow.com/questions/25520410/when-setting-a-font-size-in-css-what-is-the-real-height-of-the-letters/ — G-Cyrillus, May 20 '21 at 13:16

CSS column fill balance with text alignment on the bottom

1 Answers1