One UL list split into multi columns with fixed height

Question

I would like to create one UL list that will contain a variable number of LI elements. I would like the heigh of the container to be max 500px. Which means if i have more li elements that go over that 500px height i want it to turn into 2 columns. If there is more then can fit for 2 columns i would like it to turn into 3 columns. I have enough space to fix max 5 columns and the data will never go over that amount.

Any idea how i can do this? Any jquery, css tricks? or do i need to handle each scenario server side to do this.

Example 1

    list entry    list entry 
    list entry    list entry
    list entry    list entry
    list entry    list entry
    list entry    


 Example 2
    list entry    list entry     list entry
    list entry    list entry     list entry
    list entry    list entry     list entry
    list entry    list entry
    list entry    list entry


 Example 3
    list entry    list entry     list entry     list entry
    list entry    list entry     list entry     list entry
    list entry    list entry     list entry     list entry
    list entry    list entry     list entry
    list entry    list entry     list entry

If it cant be achieved without one UL then i am open to that.

Thanks!

If you are open to making a new ul for every 5 lis, this is relevant stackoverflow.com/questions/11308375/… (I know it's a different language, but the principles apply) — Jørgen R
– Jørgen R, Commented Oct 30, 2012 at 14:16
will LI all be same height or variable? Can do either way but easier if fixed — charlietfl
– charlietfl, Commented Oct 30, 2012 at 14:21
li's will be variable and i need it dynamic where if all LI's are in one line then i can fit 5 but if one li covers 2 lines then i can only fit 4. I know i can do it like you said above but i need it to very dynamic. — Scoota P
– Scoota P, Commented Oct 30, 2012 at 14:39
I see that these are <ul>, but is the order important? If it's not, you could stick them in a <div> with appropriate padding/margins and 'float: left'. If the order of the items isn't important, I can provide an example. I'm still trying to think how to do it with CSS alone assuming order IS important. — user1720624
– user1720624, Commented Oct 30, 2012 at 15:18

user1720624 · Accepted Answer · 2012-10-30 15:42:51Z

3

http://jsfiddle.net/eaewX/1/

If you encapsulate each list in a <div>, setting columns, column-width, or column-count on <div>, it will break the list into columns appropriately.

edit: It is in the jsfiddle, but I should clarify you'll need to use browser extensions for these properties currently, i.e. -webkit-, -moz-, -o-

For reference:

https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multi-column_layouts

http://dev.w3.org/csswg/css3-multicol/#columns

answered Oct 30, 2012 at 15:42

user1720624

Sign up to request clarification or add additional context in comments.

6 Comments

Scoota P Over a year ago

i dont know if its 2 columns or 3 or 4. So how would i handle that?

user1720624 Over a year ago

You can set the column-count (or the first parameter in columns) to be a number higher than you need. It should only wrap to a new column when it runs out of room in it's parent element. So, in your case, you could say column-count: 5 and you should be fine.

user1720624 Over a year ago

@charlietfl That is partially true. If you want this exact layout no matter what, yes, you're 100% right. However, browsers that don't support columns would just render it normally (vertically).

charlietfl Over a year ago

@Llepwryd just important for OP to know that CSS3 isn't 100% cross browser

Scoota P Over a year ago

I need a solution that works in ie7, ie8, ff, chrome, safari. So css3 would not be a 100% solution

|

charlietfl · Accepted Answer · 2012-10-30 15:21:44Z

0

Here's a working solution

/* set max height of containers */
var maxHt=500;/* may need to adjust based on css*/

var $list=$('#startList')
var $container=$list.parent();

var $li=$list.find('li');

var totHt=0;    
var totItems=$li.length;
$li.each(function( idx){

    var ht=$(this).height();
    if( totHt + ht >= maxHt || idx==totItems-1){
        $('<ul>').append( $(this).prevAll().andSelf() ).appendTo( $container );
        totHt=0;
    }else{
        totHt += ht;
    }  

});

$list.remove()

DEMO: http://jsfiddle.net/rzw64/3/

Note that height set on UL needs a little extra than max height used for calcs. Additional CSS will help or can add code to get dynamic height of parent container to set maxHt allowed

edited Oct 30, 2012 at 15:21

answered Oct 30, 2012 at 15:09

charlietfl

172k14 gold badges125 silver badges154 bronze badges

2 Comments

Scoota P Over a year ago

Looks like the right direction. However if i have an li list that wraps to 2 lines it covers an existing li. See here jsfiddle.net/rzw64/4

charlietfl Over a year ago

that would only happen when height is set on LI. My demo I set fixed random heights so I could create some variations. The height is being set inline so I didn't have to manually create a bunch of html

Collectives™ on Stack Overflow

One UL list split into multi columns with fixed height

2 Answers 2

6 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Linked

Related