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.
If you are fine with css3, you could use *box-flex* property. 

*box-flex* property specifies how a box grows to fill the box that contains it.

Try this,

```
 #menu {
    width: 100%;
    padding: 0;       
    list-style: none;
    display: -moz-box; /* Mozilla */
    -moz-box-orient: horizontal; /* Mozilla */
    display: -webkit-box; /* WebKit */
    -webkit-box-orient: horizontal; /* WebKit */
    display: box;
    box-orient: horizontal;
  }

  .active {
    -moz-box-flex: 1;  /* Mozilla */
    -webkit-box-flex: 1; /* WebKit */
    box-flex: 1;
  }

```