Ordering items vertically, and scroll div horizontally

Question

I have some divs, and I want them to start filling the main div vertically, and then cause the main div to scroll horizontally.

Currently, I'm using float:left on child divs, but it does exactly the opposite: it starts filling the main div horizontally, and then the main div scrolls vertically.

The number of rows may differ based on screen size, so I can't create a table for this purpose.

table + some javascript hacks may allow me to do this, but I prefer a CSS (without any javascript) way. Because this code will run on mobile apps, and javascript will slow down the web app.

This is my current code, and here's the result of my current code. But I want something like this.

UPDATE: As @goliney suggested, seems that it can be done with css-columns. I created this example right now.

Now, there are these two problems:

While it's working good, it still needs some javascript to determinate number of visible columns (column-count) in the page. Although it's a minor javascript process, is there any way to do it in CSS, too?
Also, I prefer to show a little bit of fifth column, so user can know that this list is scrollable horizontally. But columns-count can't accept some float value (like 4.2), it only accepts integer values. So how can I do it?

Take a look at [css3 columns](http://www.w3schools.com/css/css3_multiple_columns.asp) — Serhii Holinei, Sep 08 '14 at 12:21
@goliney Thanks. I created this example right now: http://jsfiddle.net/w6Lf6ah1/1/ While it's working good, it still needs some javascript to determinate number of visible columns (`column-count`) in the page. Although it's a minor javascript process, is there any way to do it in CSS, too? — Mahdi Ghiasi, Sep 08 '14 at 12:29
try to see http://stackoverflow.com/questions/8705323/2-row-element-layout-within-horizontal-div — Fabrizio Calderan, Sep 08 '14 at 12:43

score 0 · Accepted Answer · answered Sep 08 '14 at 13:21

As @goliney suggested, css3 columns can help.

I've created an example of using css3 columns in this issue, here.

However, it needs javascript to figure out count of columns, or since I'm targeting tablets, I can create some predefined classes using media queries.

Second, I needed some way to show a little bit of next column, so user can know that this list can be scrolled horizontally.

I've found that if I set a margin-left and then take it back into it's right place using translateX, it'll happen correctly.

So this is the final code for container div:

.main {
    column-count: 4;
    column-gap: 40px;

    height:480px;

    margin-left:80px;
    transform: translateX(-80px);
}

(I removed prefixed properties here, but they're available in jsFiddle)

And this is the final result in jsFiddle.

Ordering items vertically, and scroll div horizontally

1 Answers1