1

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?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Brett
  • 19,449
  • 54
  • 157
  • 290
  • The link provided in the above comment says it all (no, you can't have different sizes for CSS3 columns) but I would like to suggest you use a `
    `     – Ankush Nov 24 '15 at 07:53
  • Or `display: table` instead. – wintercounter Nov 24 '15 at 08:13
  • I can't use tables as the content is dynamic and it needs to span multiple columns - ie; I'm not able to break the content up. But alas, I had to come up with another way to separate the content so I could return it as two pieces instead. – Brett Nov 24 '15 at 13:31

1 Answers1

5

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.

Aravind Bharathy
  • 1,540
  • 3
  • 15
  • 32