CODEWITHSUNDEEP
htmlcsshtml-lists
user653522
user653522

Reputation:

How do I give lists a specific height so they move into a new column next to it?

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

Upvotes: 1

Views: 288

Answers (3)

David Hellsing
David Hellsing

Reputation: 108490

Yes you can, using column-count:

ul {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
    height: 60px;
    width: 300px;
}

Although this is not supported in all browsers. You can use a javascript plugin to polyfill, or just use progressive enhancement (it’s a list after all).

http://jsfiddle.net/ASDkz/

Upvotes: 1

Paul Aldred-Bann
Paul Aldred-Bann

Reputation: 6020

A quick way would be to float your li tags, like this:

ul
{
    height: 100px;
    border: 1px solid #f00;
}

li
{
    float: left;
    border: 1px solid #0f0;
    width: 50px;
}

But this will give you the following structure:

List1    List2    List3
List4    List5

If you specifically need the structure in your provided image then you may need to look at some dynamic rendering with jQuery to get full browser support.

Example jsFiddle

Upvotes: 0

moopet
moopet

Reputation: 6175

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.

Upvotes: 1

Related Questions