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

<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

Manumission

It does work as expected. jsfiddle.net/B3YLp – Trio

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

Ne

this is what i am looking for but it is not supportive to IE any solution for this... – Manumission

The only thing you can do is find a suitable polyfill. See if this one works: github.com/BetleyWhitehorne/CSS3MultiColumn – Ne

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

Orthodontist

Yeah, I like this one more because it's easier to see intent from the HTML. – Tincture

i am working on wordpress for this i have to customize the HTML structure, thats a pretty long process... – Manumission

Ripping one list of data apart and make it two lists just for displaying purposes does not make any sense semantically. – Dreher

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

Officialism

Although the HTML/CSS is okay, I would find this a bit hard on the semantics and for maintenance. I would rather see to ul elements to group the left and right links respectively. – Read

@MarcAudet right. grouping the content into "columns" would be a more maintainable approach. though, my answer helps to clarify/illustrate the issue of why the columns are skewed; and more importantly how clears and floats function ... – Officialism

I agree @Xander - it is good so see both options being discussed since both are useful depending on the content being marked up. – Read

since i am using wordpress widgets so that thing is not dynamically adapted by wordpress because widgets can be arranged as the user want to be... – Manumission

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

}

Apogeotropism