standard logo    Personal Education



CSS Balanced Columns

For several years, I've been adding to a list of Wicked Wonderful Wordies, releasing them as PDF files with 12 wordies per set. The column for the sets grew over time to take up a lot of vertical space on the web page. Splitting the long list into several shorter columns was what I needed, but I wanted to avoid manually dealing with adjusting the list as the new sets continued to be added. I went looking for a CSS solution. It is gratifying to say I found one.

I note that there is a minor issue with using paragraphs in the columns because the first column becomes shorter than expected with an un-intended paragraph at the top. The "fix" is to use <br> tags instead as shown for the second list below. An obvious extra benefit comes from the columns being more compact.

The code I came up with for my needs is shown below. In the style, adjust the column-width value to be appropriate to the need. The same is true for the height value. Experiment to decide whether column-fill should be auto or balance. For me, it didn't seem to matter. Now I can simply add a new row to the html list and the CSS will take care of gradually expanding the columns.


<style>
.container {
  column-width: 4em;
  column-fill: balance;
  height: 10em;
}
</style>

<div class="container">
  <p> <a href="wordies01-final.pdf">Set 1 </a></p> (doesn't look good)
  
  <a href="wordies01-final.pdf">Set 1 </a><br> (aligns much better and is compact)

As a side benefit, this technique has also been applied to the list of CSS experiments on the index page of this section of the web site. The column width needed to be 18em to work for the index, and the height was set to 60% of the frame (parent element). Lots of tricky stuff involved in keeping things relative measurements instead of fixed sizes like 10px or 10mm.

How does it look?

Paragraph tags in column make an odd offset, though it may work fine if you're working on regular text columns.

Sets of 12 wordies with answer key (US Letter PDF)

Using line breaks fixes the odd spacing, while also making the list more compact.

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Spanning_Columns