CSS Positioning and Display Order

Question

I have a block of HTML:

<ul>
  <li>a</li>
  <li>b</li>
  <li class="nav">c</li>
  <li class="nav">d</li>
</ul>

and a CSS ruleset:

ul li {
 display: inline;
}

li.nav {
 float: right;
}

which are not behaving to my intentions: I want it displayed like so:

ab                                      cd

but instead it's

ab                                      dc

the difference being the displayed order of elements. How do I have the list items of class "nav" be displayed in their syntactical order?

Answer 1

If you want c & d to be displayed in a block at the right, you'll have to put them inside one block element, not setting the float attribute on both. I don't think that list elements like <li> are the right choice for your intention. You don't want to display a single list, so you may try using two lists (where one of them has the float attribute) or just simple <div> elements.

Answer 2

Well, the obvious quick fix is to just reverse the order of the elements in the list:

<ul>
  <li>a</li>
  <li>b</li>
  <li class="nav">d</li>
  <li class="nav">c</li>
</ul>

I'm guessing what happens is that whenever the rendering engine encounters an element with float:right it pushes that element as far to the right as possible. So it first encounters the "c" and pushes that all the way over to the right, then it encounters the "d" and pushes that as far right as possible - but the "c" is already occupying the rightmost spot, so "d" stays to its left. Essentially, the elements are laid out in right-to-left order rather than left-to-right order.

Another option, I think, would be to divide the elements into two lists and just apply the float: right style to the second list as a whole (i.e. to the <ul> element).

<ul>
  <li>a</li>
  <li>b</li>
</ul>
<ul class="nav">
  <li>c</li>
  <li>d</li>
</ul>

and

ul li {
 display: inline;
}

ul.nav {
 float: right;
}

That way the list itself would float to the right margin but the order of the elements in it wouldn't be reversed.

Answer 3

So actually you want a nav list and some other list? Why not use 2 lists?

<ul class="other">
  <li>a</li>
  <li>b</li>
 </ul>
<ul class="nav">
 <li>c</li>
 <li>d</li>
</ul>

And css:

ul li {
display: inline;
}

.other{
float:left;
}

.nav {
float: right;
}

Answer 4

Try this:

 ul {
  text-align: right;
 } 
 ul li {
  display: inline;
 }

 ul li.default {
  float: left;
 }
 li.nav {
  float: auto;
 }

<ul>
  <li class="default">a</li>
  <li class="default">b</li>
  <li class="nav">c</li>
  <li class="nav">d</li>
</ul>

Answer 5

I fixed this issue by separating the list into two and floating them to their respective positions. I wrapped the two lists with a div and applied overflow: auto to it. My final CSS code looked like this:

ul li {
 display: inline
}

div.post-info-wrap {
 overflow: auto
}

ul.post-info {
 float: left
}

ul.nav {
 float: right
}

and my markup like:

<div class="post-info-wrap">
  <ul class="post-info">
    <li/>
  </ul>
  <ul class="nav">
    <li/>
  </ul>
</div>