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: 
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.
Instead of giving widths in px, set the widths in percentages.

So you could have the non-active each be 10%, and the active will be give a width of 70%