Flottant plusieurs li à gauche et à droite

Je suis en train de faire un personnalisé la barre latérale dans wordpress, j'ai tous les éléments et informations dans li, ce que je suis en train d'essayer de faire est de déplacer la moitié du total de la li à gauche et l'autre moitié vers la droite...

Ce que j'utilise est float/clair de gauche et de droite, qui semble pas marcher comme je voulais...

Structure HTML:-

<ul>
    <li class="left">Left</li>
    <li class="left">Left</li>
    <li class="left">Left</li>
    <li class="left">Left</li>
    <li class="left">Left</li>
    <li class="right">Right</li>
    <li class="right">Right</li>
    <li class="right">Right</li>
    <li class="right">Right</li>
    <li class="right">Right</li>
</ul>

Le CSS:-

.left { float:left; width:50%; clear:left; }
.right { float:right; width:50%; clear:right }

jsFiddle

Il fonctionne comme prévu. jsfiddle.net/B3YLp

OriginalL'auteur SaurabhLP | 2013-04-01