Question

I’m building an horizontal menu in HTML+CSS. The current result is fine, except I want to have some items on the left, and others on the right. I couldn’t find useful result on Google with such common keywords so I’m asking on SO.

Here’s my code so far:

#menu
{
    background-color: #383838;
    height: 65px;
    margin-bottom: 20px;
}

#menu ul li
{
    float: left;
}

<div id="menu">
    <ul>
        <li>Link 1</li>
        <li>Link 2</li>
        <li>Link 3</li>
    </ul>
</div>

I’d like to have Link 3 on the right, so the space between link 2 and 3 should be filled at maximum. I don’t want a filler <li> tag, but instead apply a class to the last <li> on the left, or the first <li> on the right. Don’t want to adjust the width as I’ve a :hover background color changing effet on the links. I suppose margin or padding should do the trick but I can’t manage to find how.

Any clue?

Answer 1

Have you tried applying a float: right; style to the <li>Link 3</li> element?