How to position unordered lists in a variable number of columns

[whoisgregg]

Hello! This is my first post to webmaster world. I "found" this site a week ago and it has been incredibly useful. Hopefully, there's a solution to be found here for my question! :)

I would like to take a bunch of unordered lists (each defined with a fixed width) and have them flow into as many columns as are possible based on the visitors window size. Essentially, if each "ul" is 100 pixels wide, I want them to draw 5 columns across on a 500 pixel wide page and 6 columns across on a 600 pixel wide page, etc.

This is easily accomplished by wrapping the group of uls in a <div id="variablecolumns"> and then defining each ul as such:

div#variablecolumns ul {
display: block;
float: left;
width: 100px;
}

However, each list varies in length and browsers start drawing each row of unordered lists at the bottom point of the longest list in the row above it. Example:

¦ List 1 ¦ List 2 ¦ List 3 ¦
¦ List 1 ¦ List 2 ¦ List 3 ¦
¦ ...... ¦ List 2 ¦ List 3 ¦
¦ ...... ¦ List 2 ¦ ...... ¦
¦ ...... ¦ List 2 ¦ ...... ¦
¦ ...... ¦ ...... ¦ ...... ¦
¦ List 4 ¦ List 5 ¦ List 6 ¦
¦ List 4 ¦ List 5 ¦ List 6 ¦
¦ ...... ¦ List 5 ¦ List 6 ¦
¦ ...... ¦ List 5 ¦ ...... ¦
¦ ...... ¦ List 5 ¦ ...... ¦

When what I really want is for the lists to be displayed like this:

¦ List 1 ¦ List 2 ¦ List 3 ¦
¦ List 1 ¦ List 2 ¦ List 3 ¦
¦ ...... ¦ List 2 ¦ List 3 ¦
¦ List 4 ¦ List 2 ¦ ...... ¦
¦ List 4 ¦ List 2 ¦ List 6 ¦
¦ ...... ¦ ...... ¦ List 6 ¦
¦ ...... ¦ List 5 ¦ List 6 ¦
¦ ...... ¦ List 5 ¦ ...... ¦
¦ ...... ¦ List 5 ¦ ...... ¦
¦ ...... ¦ List 5 ¦ ...... ¦
¦ ...... ¦ List 5 ¦ ...... ¦

(Hopefully, my ASCII art shows what I am looking to do.)

To put it another way, I want to define a float of "left" and a float of "top" for each ul but of course that's not in CSS. How else can I do this WITHOUT setting a specific number of columns?

[Reflection]

Welcome to WW, have you tried experimenting with the clear property? Try clear:none; and see what happens.

[whoisgregg]

Thanks Reflection for your quick reply!

I have tried the clear property and does not have any effect. If clear defined top and bottom instead of just left and right, then setting it to none might have an effect... but CSS isn't written that way.

I have thought more about this and an additional acceptable solution (probably a much better one, actually) would be if the lists displayed like this:

¦ List 1 ¦ List 3 ¦ List 5 ¦ 
¦ List 1 ¦ List 3 ¦ List 5 ¦ 
¦ ...... ¦ List 3 ¦ List 5 ¦ 
¦ List 2 ¦ ...... ¦ List 5 ¦ 
¦ List 2 ¦ List 4 ¦ List 5 ¦ 
¦ List 2 ¦ List 4 ¦ ...... ¦ 
¦ List 2 ¦ ...... ¦ List 6 ¦ 
¦ List 2 ¦ ...... ¦ List 6 ¦ 
¦ ...... ¦ ...... ¦ List 6 ¦ 

Which begs the question... how do you make any type of elements draw top-to-bottom instead of left-to-right?

[Reflection]

Hmmm you have a problem in that you are trying to achieve something that most people want to avoid :). In other words good luck.

[DrDoc]

Is the number of lists known? In other words, do you have six lists, as in your examples, or does this have to work with an unknown number of lists?

[TGecho]

I think he said the number is unknown. That makes it very complicated if not impossible.

[DrDoc]

Well, it's not impossible -- but, yes, extremely difficult.

The problem is how to know the height of an element before it has been rendered. There's no way you can do that. The browser doesn't even know that.

So, you're left with two choices:
1) live with the fact that the next row will be drawn level with the longest list in the above row
2) once the page has been rendered, use JavaScript to move the lists around

Option two would be hard to get working, not to mention how buggy it would be in some browsers.

[Mr Bo Jangles]

IMO, this is where and why tables were invented and this is a classic case of why you should use tables here and not try and do this part with css - but use css to control the look and feel of your table. You will not have any hair left if you try and get something like this working with pure css, across all browsers.

[alexhudson]

Mr Bo Jangles: you can't achieve that effect using tables. whoisgregg is asking for something which lays out dynamically; a table wouldn't give that flexibility.

whoisgregg: you're waiting for columns support in CSS3, I'm afraid. CSS2- will not achieve that effect by any method I can think of. Come back in four years :(

[whoisgregg]

Thank you all very much for your help with this. I have resigned myself to the fact that this won't work the way I hoped.

By arranging the lists in descending length order, I can at least make it look good most of the time. It's only on very wide browser windows that it doesn't look quite right.

Thanks again! :)

[killroy]

An alternate arrangement that you can make work (by floating the LI's and giving them a %age width) is as follows:

¦ List 1 ¦ List 1 ¦ ...... ¦ List 2 ¦ List 2 ¦
¦ List 2 ¦ List 2 ¦ List 2 ¦ ...... ¦ List 3 ¦
¦ List 3 ¦ List 3 ¦ ...... ¦ List 4 ¦ List 4 ¦
¦ List 4 ¦ List 4 ¦ List 4 ¦ ...... ¦ List 5 ¦
¦ List 5 ¦ List 5 ¦ List 5 ¦ ...... ¦ List 6 ¦
¦ List 6 ¦ List 6 ¦ ...... ¦ ...... ¦ ...... ¦

I.e. have each cell go from left to right...

SN