Question

Is it possible to give a list (< ul >) a specific height or similar, where it just moves the items (< li >) into a new column if there are too many?

I’ve illustrated it here:

http://oi47.tinypic.com/2dqj5gg.jpg

The red box has a specific height. When there are more items than there’s space available it should simple just move them up to the next row as it does with “List7, List8, List9” in my example

Answer 1

Use CSS column-count some way like this:

ul {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
}​

Though it’s not universally supported and challenged browsers will just ignore it. For them you’d have to do something non-semantic like manually splitting it into more than one UL and floating them or something equally horrible.