Different width CSS columns

Question

I'm using CSS Columns, eg:

HTML:

<div class="foo">
    <div class="content">

    </div>
</div>

CSS:

.content {
    column-count: 2;
}

However I want to have my columns different widths when using column-width.

Is that possible at all? I guess there is no way to use percentages either?

Answer 1

There is NO CORRECT way to set different column widths with CSS columns.

Why it won't work

column-width property only species the optimal width. The final output will be stretched or shrinked based on the available parent width. So it is not the right property to use when you need fixed or different column widths. Ex:

div {
  width: 100px;
  column-width: 40px;
}

There is room for two 40px wide columns inside the 100px wide element. In order to fill the available space the actual column width will be increased to 50px.

div {
  width: 40px;
  column-width: 45px;
}

The available space is smaller than the specified column width and the actual column width will therefore be decreased.

Tweak

In case you have 2 columns, you can set a -ve margin-right to get different column widths. This works with more than 2 columns but is limited to just 2 widths.

Feasible Solution

You can use tables or display:table instead to achieve similar results.