Vertical-floating elements in CSS?

Question

Is there any solution for my problem, described in this image?

I have a DIV-tag with a fixed height. In this element, i have a List. This List should be floated like columns. The list-elements have a fixed width. if there are "too much" elements in the Div-Tag, it should scroll horizontally. The amount of columns and elements is not fix. It should also work in old Browsers.

Is there any solution with HTML/CSS?

Please post up what code (if any) that you have tried so far. — Billy Moat, Apr 02 '13 at 16:05
Interesting :) I've created a fiddle - http://jsfiddle.net/y93pZ/ for anyone to use since I'm wondering if this is possible with CSS only. — Kaloyan, Apr 02 '13 at 16:13
Are the list-elements fixed height? Can you add containers? Because then floating them (or inline-block) is enough — FelipeAls, Apr 02 '13 at 16:34

Floremin · Accepted Answer · 2013-04-02T16:21:11.660

9

You can use columns and related CSS3 properties:

Here is fiddle: http://jsfiddle.net/DeLL7/5/

Updated for for non-fixed number of columns and fixed container height. However, for older browsers, you're probably out of luck, without having to "manually" arrange the boxes.

edited Apr 02 '13 at 16:21

answered Apr 02 '13 at 16:13

Floremin

3,969
15
20

1

for older browsers you can try this polyfill [BetleyWhitehorne/CSS3MultiColumn · GitHub](https://github.com/BetleyWhitehorne/CSS3MultiColumn) – MikeM Apr 02 '13 at 16:26
This also doesn't work in IE10, btw. (even though it's supposed to support columns, I believe) – Colin DeClue Apr 02 '13 at 16:40
Microsoft says it should work in IE10: http://msdn.microsoft.com/en-us/library/ie/hh673534(v=vs.85).aspx – cimmanon Apr 02 '13 at 16:55
In IE10 there are indeed columns but they're all messed up. What a surprise. – Kaloyan Apr 02 '13 at 17:14

Vertical-floating elements in CSS?

1 Answers1