Question

I’m trying to create a menu, in which the last menu item (with different class) will stick automatically to the right corner of the menu. I’m attaching a screenshot for this. There are a few menu items on the left and the last item should somehow count the rest of the available space on the right in the menu div, add this space as padding to the right and display a background in whole area ON HOVER (see the screen to understand this please)

Is something like this possible?

Thanks a lot

Answer 1

See if this will work for you: http://jsfiddle.net/neSxe/2

It relies on the fact that non-floated elements get pushed out of the way of floated elements, so by simply not floating it the last element fill up the rest of the space.

HTML

<ul id="menu">
    <li><a href="#">Services</a></li>
    <li><a href="#">Doctors</a></li>
    <li><a href="#">Hospitals</a></li>
    <li><a href="#">Roasted Chicken</a></li>
    <li class="last"><a href="#">Customer Service</a></li>
</ul>

CSS

#menu {
    width: 600px;
}
#menu li {
    float: left;
}
#menu li a {
    display: block;
    padding: 6px 14px 7px;
    color: #fefefe;
    background-color: #333;
    float: left;
}
#menu li a:hover {
    background-color: #666;
}
#menu li.last {
    float: none;
}
#menu li.last a {
    text-align: center;
    float: none;
}

Edit

I’ve made some changes to make it work smoother on IE6, by floating the anchors too.

If anybody else needs this and do not need to support IE6 and below, you can get rid of those two properties.