Click to See Complete Forum and Search --> : Vertically wrap UL?


RobDavid
04-04-2009, 07:20 AM
Is there anyway to make a list that is going from top to bottom start a new column when it gets to the bottom of page?

I've tried setting the height of the ul to a fixed or 100%, but it continues to scroll down the page.

I want:

1 4
2 5
3
<bottom of screen>

instead of
1
2
3
<bottom of screen>
4
5




I was just hoping there was a way to do this using css rather than programaticlly and getting the windows height as a fixed #

Webnerd
04-04-2009, 07:48 AM
Your <li> elements need to float with a fixed width inside the <ul>

RobDavid
04-04-2009, 08:43 AM
I already have a fixed width of the LI, but I don't want to float them left or right....I want them displayed top to bottom, just wrap to a new "column" when it reaches the bottom of the screen (or height of parent element)

dmboyd
04-04-2009, 02:24 PM
Currently you can't do that with CSS, which means you need to create the effect yourself. :(

There is a multi-column layout module in CSS3, but that is still a draft and can change at any time. In addition, support for it is somewhat limited, not to mention that even the latest version of Internet Explorer (IE 8) doesn't support it at all, never mind previous versions that are more widely used.

RobDavid
04-06-2009, 08:06 AM
Thanks for the info dmboyd....I just wanted to know for sure before I coded it in javascript. fun fun fun

SKUNKBALLScom
06-23-2009, 02:28 PM
Did you ever finish the Java script to accomplish this? It's driving me crazy.. Perhaps there is a simple Jquery solution..:confused:

SKUNKBALLScom
06-23-2009, 04:37 PM
Found a solution..
http://welcome.totheinter.net/columnizer-jquery-plugin/