title: make a li fill up the remaining width
body: <p>I can not fill the rest of the area with the last element. I try a couple of thing but that i see but the all apply to div : one fixed one variable. But this is a list element. It a simple menu :</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Cie Inc&lt;/title&gt;
  &lt;meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1'&gt;
  &lt;style type='text/css' media='all'&gt;
  body { 
    font-family: verdana, helvetica, arial, sans-serif;
    font-size: 100%;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    background-color  : #fff;
    color : #222; 
    min-width:1020px;
  }
  .extra  {
    position: relative;
    height: 100%;
    margin: 0 auto -132px ;
    overflow:hidden;  
    display: block;
    min-height : 100%;
  }
  .main   {
    width: 980px;
    height: 80%;
    margin: 0 auto;
    padding: 0px;
    font-size: 0.875em;
    line-height  : 1.785em;
    overflow:hidden;  
    display: block;
  }
  header  {
    position: relative;
    width: 99%;
    overflow:hidden;  
    display: block;
  }
  .indent {
    position: relative;
    padding: 10px 0 0px;
    overflow:hidden;  
    display: block;
  }
  nav{
    border : solid red;
  }
  .menu   {
    position: relative;
    border : solid blue;
    width: auto;
    margin: 0px;
    padding: 0px;
    background-color  : #fff;
    overflow:hidden;  
    display: block;
  }
  .menu li    {
    width : auto;
    position: relative;
    float: left;
    background-image  : url('images/menu-spacer.gif');
    background-position  : right top;
    background-repeat  : repeat-y;
    overflow:hidden;  
    display: block;
    padding-right:2px;
  }
  .menu li:first-child a  {
    width: 58px;
    padding: 6px 0px 8px;
    background-image  : url('images/menu-home-icon.png');
    background-position  : center center;
    background-repeat  : no-repeat;
    background-color  : #CFCFCF;
    overflow:hidden;  
    display: block;
    text-indent:-9999px;
    border-radius:9px 0px 0px 9px;
    -moz-border-radius:  9px 0px 0px 9px;
    -webkit-border-radius: 9px 0px 0px 9px;
  }
  .menu li:last-child {   
    line-height  : 58px;
    overflow:hidden;  
    background-image  : url('none');
    background-color  : #cfcfcf;
    border-radius: 0px 9px 9px 0px;
    -moz-border-radius: 0px 9px 9px 0px;
    -webkit-border-radius: 0px 9px 9px 0px;
  }
  .menu li a  {
    padding: 6px 30px 8px 30px;
    color: #000;
    font-size: 22px;
    font-weight: 400;
    text-decoration : none;
    text-transform : capitalize;
    line-height  : 2em;
    background-color  : #CFCFCF;
    overflow:hidden;  
    display: block;
    letter-spacing: -1px;
  }
  .menu li a.active   {
    background-color  : #B6B6B6;
    overflow:hidden;  
    display: block;
  }
  .menu li a:hover    {
    background-color  : #666;
    overflow:hidden;  
    display: block;
    cursor:pointer;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body id='accueil' &gt;
    &lt;div class="extra"&gt; 
     &lt;div class="main"&gt; 
       &lt;header&gt;
         &lt;div class="indent"&gt;
           &lt;nav&gt;
             &lt;ul class='menu'&gt;
               &lt;li&gt;&lt;a class='active' href='index.php?Choix=1_' &gt;Home&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href='index.php?Choix=2_' &gt;Who Are We&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href='index.php?Choix=3_' &gt;Our Services&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href='index.php?Choix=4_' &gt;Our Team&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href='index.php?Choix=7_' &gt;Reach Us&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&amp;nbsp;&lt;/li&gt;
             &lt;/ul&gt;
            &lt;/nav&gt;
          &lt;/div&gt;
        &lt;/header&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>