p1 p2 p3 p4
p5 p6 p7 p8

p1 p4
p2 p6
p3 p7
p4 p8

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

<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>

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

<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>