Floating multiple li's left and right

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

Left
Left
Left
Left
Left
Right
Right
Right
Right
Right

``` The CSS:- ``` .left { float:left; width:50%; clear:left; } .right { float:right; width:50%; clear:right } ``` jsFiddle

Accepted Answer

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;
}
```

Floating multiple li's left and right

Solution

Problem