CODEWITHSUNDEEP
htmlcss
PW Kad
PW Kad

Reputation: 14995

Make content go down and overflow horizontal css

I'm not sure a better way to explain this except to possibly look at a site like craigslist or something.

What it does now - 

*****
*1  *
*2  *
*3  *
*****

What I want - 

*****
*147*
*258*
*369*
*****

http://jsfiddle.net/N8qf8/

I made a fiddle but of course I can't get the overflow to do what I want. Any idears? Applying overflow: auto; just gives it a scroll bar when it hits max-height, is there anything to allow to it go to the next column?

Upvotes: 1

Views: 259

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 240938

In supported browsers you can use CSS3 columns:

Updated Example

ul {
    overflow: auto;
    max-height: 70px;
    -webkit-column-count:3;
    -moz-column-count:3;
    column-count:3;
}

Support for this can be found here.

Upvotes: 1

Related Questions