This article was written in 2014. It might or it might not be outdated. And it could be that the layout breaks. If that’s the case please let me know.

Keep items in a single column

Every afternoon at 13:37 my server generates a PDF. It’s been doing this for a few months now and I wanted to share these PDFs with the world. Multi-column layout is an excellent way to display such a big — and growing — list. There was a problem though: sometimes the date of the last item in a column was shown in a different column than the Download-or-buy-this-book-links. There is a way to prevent this from happening.

Overflow

I thought that a simple overflow: hidden; would fix this issue. It does so in Firefox, but it doesn’t fix it in all other browsers. You can fix it by adding display: inline-block; to the list-item. You then need to add width: 100%; to it as well in order to make it as wide as the column, instead of as wide as the content. This works in all browsers, including Firefox. So this is the code that fixes it:

dd {
    display: inline-block;
    width: 100%;
}