Display HTML UL in a vertical direction

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.

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

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.

This works:

CSS:

<style type="text/css">
ul {
    float:left;
}
.clearlist {
    clear:both;
    margin:0 410px 0 34px;  
 }
</style>

HTML:

<ul>
    <li>p1</li>
    <li>p2</li>
    <li>p3</li>
    <li>p4</li>
</ul>

<ul>
    <li>p5</li>
    <li>p6</li>
    <li>p7</li>
    <li>p8</li>
</ul>

<div class="clearlist"></div>