Search code examples
htmlcssmultiple-columnsviewport-units

CSS3 Columns using viewport width

I'm trying to mimic Windows 8 sidescrolling and multiple column layout using CSS3 columns, but I want columns to have a fixed width, or as I'm doing in my fiddle, viewport width.

Now, no matter what kind of unit I use, it seems columns auto-fit themselves into the container div, regardless of the width I set.

In my fiddle I set columns to be 35vw, and that gives me 2 columns of equal width. As far as I know, that should result in 2 fully visible columns and part of the third, but that is not happening. This behavior also happens if I set px, em or % as units.

Is this a browser default behavior or am I missing something?

Solution

  • I managed to find out by fiddling around what was going on, so I'll share my findings and also a solution.

    1. There are two ways of setting columns with CSS: with column-count setting how many columns should fit in the container width, regardless of the columns width; and with column-width setting the optimal column width, fitting as many columns as possible inside the container width.

      This means that if I set column-width: 300px the browser will try to fit as many columns inside the container as possible that will be around 300px width. Depending the amount of content and the viewport width, the columns width will change.

      This is the desired browser behavior according to specification. (MDN, W3C)

    2. In my first fiddle, I was trying to set column-width: 35vw while the container had width: 100% (inherited). Playing with the container width, I found out that the behavior explained above was happening because the container width was never explicitly set. With that in mind, I hoped I could set the container width through javascript or any other CSS property, to no avail.

    3. Fiddling around, I set the container as position: absolute, and then the behavior I was expecting happened. Then I tried float: left, and it also worked.

      Now, as far as I've tested, this doesn't work with webkit (Opera dev latest, Chrome stable latest). IE11 and Firefox latest display as desired. Maybe is a bug or something. This can be checked in my latest fiddle.