List Style with a twist

[onlyican]

Hey all

This is a little complex

 

I have an Unordered List

As we all know, list Elements display Down Page

BUT

I want to go across 3 then down 1, across 3

For Example, with the alphabet being my LIs

A    B  C

D  E  F

G  H  I

....

 

How would I do this in CSS or do I require JS

[haku]

Float them all left. Give every 3rd element (1, 4, 7, 10 etc) a special class. Set clear:left to that class.

[onlyican]

Found the method

 

Have an outter div with a fixed with

Then have the List Element class a fix width but float left

Then when the Outter div limit is hit, the Lists will continue on a new line.

[nexprograms]

I think it cannot be done by css nakedly, but can be done using some trick by using some css class.

Set css class to every next 3 alphabet li.

 

<style type="text/css">
ul {
list-style: none;
}

li {
float: left;
width: 20px;
text-align: center;
margin-left: 2px;
}

.down {
clear: both;
}
</style>

 

<ul>
<li>A</li>
    <li>B</li>
    <li>C</li>
    <li class="down">D</li>
    <li>E</li>
    <li>F</li>
    <li class="down">G</li>
    <li>H</li>
    <li>I</li>
    <li class="down">J</li>
    <li>K</li>
    <li>L</li>
    <li class="down">M</li>
    <li>N</li>
    <li>O</li>
</ul>