splitting nav into multiple columns

Hi and thanks for your quick reply.
Just floating the <li> elements will not create a column in itself as like you say the outer container would have to be floated to avoid all <li> elements floating in a row. The only way i can think of attaining this at the moment is to have separate <ul> tags so you’d have something like this:

<ul class="firstCol">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<ul class="secondCol">
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
</ul>

float:left and a set width would then be applied to the <ul> elements.
In Wayfinder I would then have to specify the range of documents to include in each column.
It’s not ideal but it will suffice for me at the moment.
If anyone else has any ideas how to accomplish this please post.

Cheers
J

If you noticed, I didn’t write to simply apply a float to the items, I noted to apply a left float to the ones you want on the left, a right float you want on the right, and no float for the middle column. Again, I haven’t tested it, but I’m pretty sure that would work, or that you could get something similar to work. The easiest way to do it is definitely to wrap the items in some sort of containing div; maybe not the best way, but definitely the easiest.

There is also this

https://developer.mozilla.org/en/css3_columns
http://www.quirksmode.org/css/multicolumn.html
http://www.alistapart.com/articles/multicolumnlists/

Usually I just use a basic float, sizing the menu container and the individual menu elements to make as many columns as I want, then use the MenuIndex of each resource to control where they appear, starting in increments of 10 so there is room to add more into each "column".

Quote from: sottwell at May 17, 2011, 11:42 PM

There is also this

https://developer.mozilla.org/en/css3_columns
http://www.quirksmode.org/css/multicolumn.html
http://www.alistapart.com/articles/multicolumnlists/

Usually I just use a basic float, sizing the menu container and the individual menu elements to make as many columns as I want, then use the MenuIndex of each resource to control where they appear, starting in increments of 10 so there is room to add more into each "column".

That makes a lot of sense. Meaning, in your backend, (out of 6 products), Product 1 has a menu index (MI) of 10, Product 2 MI of 40, Product 3 of 20, Product 4 of 50, Product 5 of 30, Product 6 of 60? Resulting in:
Product 1 (10) | Product 3 (20) | Product 5 (30)
Product 2 (40) | Product 4 (50) | Product 6 (60)

Great technique! I hope I understood correctly.

You have it correct. Then if you need to add items, just insert their MenuIndex so they fall in the proper spot to maintain everybody’s positions.