CSS3 Multi-column module: let text flow over columns


I’m working in a fixed height context (as in "I don’t want the height of my container to expend). I am using a multi-column approach to display text. However, I can’t always predict the length of the text. Usually, three columns is ok. But what if it’s not? Is there a CSS way to automatically create a fourth column that will receive the extra amount of text?



According to the W3C’s multi-column spec it seems if you don’t set a number of columns, but instead column-width, then the size of the container determines the number of columns.

However I don’t think it would be creating horizontal scrollbars in order to make the container wider in order to fit more columns. Instead, likely the user’s screen width determines the width of the container, which might not be wide enough in some cases. If the screen is too small, meaning the container for the columns is too small, you’ll get maybe only two columns and much longer ones, which hits your height issue.

You could possibly allow the columns to get taller as a default and have Javascript determine if the column container needs to be manually set wider in order to produce more columns. It’s not elegant but on the other hand if you’re using JS for that then you could then also incorporate support for browsers who don’t even do multi-col anyway. Which maybe you’re already doing.