Always one left floating list element with css

Question

Hi,

I have a navigation with the following html code:

<ul id="nav">
  <li><a>home</a></li>
  <li><a>login</a></li>
  <li class="selected"><a>shop</a></li>
  <li><a>help</a></li>
</ul>

What I want to accomplish is that the element with the "selected" class always appears at the left side of the navigation.

So if shop is selected the rendered navigation would look like:
shop      home login help

If help is selected:
help      home login shop

My css:

#nav li {
display: inline; }

#nav li.selected {
  width: 230px;
  text-align: center;
  background: #b52830;
  margin-right: 10px;
  float: left;
  display: block; }

  #nav li.selected a {
    display: block;
    padding-right: 0; }

    #nav li.selected a:hover {
      color: #fff; }

It works for certain browser but not for all. Any ideas?

If it does not work the selected element moves beneath the rest...

shop selected:
home login help
shop

Answer 1

If ul#nav always have fixed width you could tell .selected to float left and all other elements to float right.

Answer 2

I would try to avoid to combine inline and block display like this. It would be helpful if you write how does look like if it not works.

Answer 3

Another alternative would be to use a programming language (like php or javascript) to print the list of links in order with class "selected" at the top of the list.

Floating left will put the first ordered li furthest to the left on the same line as the other li elements. Inversely, floating right will put the first ordered li furthest to the right.

How are you applying class "selected" to the appropriate li?