column-width Property

This property allows you to set a specific width for the columns that are displayed. It can take a standard length value, a percentage value, auto and inherit. The default behavior for this property is that if a single value is supplied, it is applied equally across all displayed columns. So if you set a specific length or percentage value, it is applied equally across all of the displayed columns. The auto value apportions the same amount of available space to the number of columns that have been set by the column-count property. If you want to set a width value for successive columns, you can also do that by setting successive values to this property in order. The following code snippet shows how you could use this property to set three columns, the first of which is set to 150 pixels in width, the second being 35% of the browser window, and third filling the rest of the available space.

div.columns {column-count: 3; column-width: 150px 35% auto}

It is easy to go wrong with this sort of property by setting larger widths than are possible to be displayed — like setting more than two 50% width values. In cases like these it is possible that content could be "lost" in the process. In these cases it is recommended that overflow: visible be used in order to ensure that any content that might overflow the columnar layout might be displayed by default.