Question

I have found several post with similar problems, but none targeting my exact problem:

I am creating a menu with this HTML code:

<ul id="menu">
    <li id="item1">Item 1</li>
    <li id="item2" class="active">Item 2</li>
    <li id="item3">Item 3</li>
    <li id="item4">Item 4</li>
</ul>

What I want to do is to make the .active element use rest of remaining width on the page. I will make an click event on each LI to switch the active class.

Is it possible to do the width part with only css?

Here is the CSS I have so far:

ul#menu
{
   list-style:none;
   background: grey;
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   height: 50xp;
}

ul#menu li
{
   float:left;
   height:30px;
   border:1px solid black;
   width: 50px;
}

ul#menu li.active
{
    /* what to put here to make it use rest of widht */
}

Here is the jsfiddle to play with:
http://jsfiddle.net/GMpeD/

Answer 1

Style it as a table row, set width to 100% for both the table and the “active” cell, and prevent line breaks inside cells. Demo: http://jsfiddle.net/yucca42/jyTCw/1/

This won’t work on older versions of IE. To cover them as well, use an HTML table and style it similarly.