title: Floating multiple li's left and right
body: <p>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...</p>
  
  <p>What i am using is float/clear left and right, that not seems to work as i wanted...</p>
  
  <p><strong>HTML Structure:-</strong></p>
  
  <pre><code>&lt;ul&gt;
      &lt;li class="left"&gt;Left&lt;/li&gt;
      &lt;li class="left"&gt;Left&lt;/li&gt;
      &lt;li class="left"&gt;Left&lt;/li&gt;
      &lt;li class="left"&gt;Left&lt;/li&gt;
      &lt;li class="left"&gt;Left&lt;/li&gt;
      &lt;li class="right"&gt;Right&lt;/li&gt;
      &lt;li class="right"&gt;Right&lt;/li&gt;
      &lt;li class="right"&gt;Right&lt;/li&gt;
      &lt;li class="right"&gt;Right&lt;/li&gt;
      &lt;li class="right"&gt;Right&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>The CSS:-</strong></p>
  
  <pre><code>.left { float:left; width:50%; clear:left; }
  .right { float:right; width:50%; clear:right }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/Duejc/" rel="noreferrer">jsFiddle</a></p>