Question

I have the follow HTML:

<div id="menu">
    <ul class="menu">
        <li class="item-101"><a href="/">Home</a></li>
        <li class="item-113"><a href="/sobre">Sobre</a></li>
        <li class="item-114"><a href="/portfolio">Portfolio</a></li>
        <li class="item-115"><a href="/bastidores">Bastidores</a></li>
        <li class="item-116"><a href="/blog">Blog</a></li>
        <li class="item-117"><a href="/contato">Contato</a></li>
    </ul>
</div>

and CSS:

#menu{width:900px;margin:0 auto;}
#menu ul{margin:0;padding:0;}
#menu li{float:left;margin:10px;}
#menu .item-115, #menu .item-116, #menu .item-117{float:right;}

I want 3 menus floating left and 3 floating right, but they are reverting order.

How to do this?

Answer 1

Here’s what I suggest: http://jsfiddle.net/thirtydot/w64Nb/2/

The HTML is identical to what’s in your question.

No, .item-{uid-for-menu} are random, but for each li I can float with jquery last tree menu. – Gabriel Santos

@thirtydot assume the class always will be the same, and suggest one
solution, then, I adapt my javascript to generate the same class as my
sample class. – Gabriel Santos

Instead of relying on certain classes being present, or forcing them to be the same using JavaScript, you can just solve the whole problem with jQuery (which in a different comment, you said you have available):

$($('#menu li').slice(-3).get().reverse())
    .addClass('right').remove().appendTo('#menu .menu');​

That will take the last three li inside #menu, add the .right class (which is just float: right), and reverse the order in the HTML.