Display HTML UL in a vertical direction

Question

Normally i use ul to have list of product like this, just add "float: left" to the li and you are almost running:

p1 p2 p3 p4
p5 p6 p7 p8

Now i'm in the situation where i want it apposite like this:

p1 p4
p2 p6
p3 p7
p4 p8

Is this possible?

EDIT:

The content in the p1 is dynamic and can be different in size(height). So I'm looking for something like a article layout. Etc: maybe there is only space for 3 product in the first list, and 4 in the next row. So i can't use something like two different list, because the content and product can change.

Answer 1

You could use the CSS3 multi-column module but it doesn't have widespread support yet (i.e. won't work in IE).

Answer 2

I would suggest doing it this way. Nesting the columns in a li element.

CSS:

ul      { overflow:hidden }
li      { float:left }
li li   { float:none }

HTML:

<ul>
    <li>Column 1
        <ul>
            <li>Lorem</li>
            <li>Ipsum</li>
        </ul>
    </li>
    <li>Column 2
        <ul>
            <li>Dolor</li>
            <li>Sit</li>
            <li>Amet</li>
        </ul>
    </li>
</ul>
<p>This text is not floated because the list has overflow set to 'hidden'.</p>

And if the content is dynamic, just let your script parse it into different lists.