Floating multiple li's left and right - wordpress

Question

I am trying to make a custom sidebar in wordpress, i have all the element and info in li's, what i am trying to do is try to shift the half of the total li's to left and half to the right...
What i am using is float/clear left and right, that not seems to work as i wanted...
HTML Structure:-
<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>
The CSS:-
.left { float:left; width:50%; clear:left; }
.right { float:right; width:50%; clear:right }
jsFiddle

Answer 1

If you're willing to give up your list style disc (depending on the browser), you can do this easily without floats or modifying your markup.
http://jsfiddle.net/Duejc/2/
ul {
-webkit-columns: 2;
-moz-columns: 2;
columns: 2;
}

Answer 2

Why don't you brake it down like this, depending on the case :)
<ul class="left">
<li>Left</li>
<li>Left</li>
<li>Left</li>
<li>Left</li>
<li>Left</li>
</ul>
<ul class="right">
<li>Right</li>
<li>Right</li>
<li>Right</li>
<li>Right</li>
<li>Right</li>
</ul>
.left{
float: left;
width: 50%; }
.right{
float: right;
width: 50%; }
or do it as #Xander says :)

Answer 3

Shuffle you're HTML. when an element is cleared it does so against the previously floated element; in your case, it was the sixth element clearing the fifth:
<ul>
<li class="left">Left</li>
<li class="right">Right</li>
<li class="left">Left</li>
<li class="right">Right</li>
<li class="left">Left</li>
<li class="right">Right</li>
<li class="left">Left</li>
<li class="right">Right</li>
<li class="left">Left</li>
<li class="right">Right</li>
</ul>
jsFiddle

Answer 4

Done it with simple markup and styles
http://codepen.io/ruinunes/pen/bpgpZV
HAML:
%ul.chat
%li.stamp
Saturday
%span 20:32
%li.left Who is it?
%li.right It's Little Nero's, sir. I have your pizza.
%li.left Leave it on the doorstep and get the hell outta here
%li.stamp
Saturday
%span 20:33
%li.right Okay, but what about the money?
%li.left What money?
%li.right Well, you have to pay for your pizza, sir.
%li.left Is that a fact? How much do I owe you?
%li.left Keep the change, ya filthy animal!
%li.right Cheapskate.
SCSS
ul.chat {
font-family: sans-serif;
list-style:none;
margin: 0 auto;
padding: 0;
width: 50%;
li {
margin-bottom: 10px;
display: inline-block;
border-radius: 8px;
padding: 10px;
&.left {
background: #e3e3e3;
float:left;
margin-right: 50%;
width:50%;
border-top-left-radius: 0;
}
&.right {
background: #6CCE66;
color: #fff;
float: right;
width: 50%;
border-top-right-radius: 0;
}
&.stamp {
color: #666;
font-size: 80%;
text-align: center;
width: 100%;
span {
color: #999;
}
}
}
}