I'm having trouble filling the remaining space with the last element in my list. I've tried several solutions, but they all apply to div elements with fixed or variable positions. However, this is a list element that represents a simple menu:
<html>
<head>
<title>Cie Inc</title>
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1'>
<style type='text/css' media='all'>
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;
}
</style>
</head>
<body id='accueil' >
<div class="extra">
<div class="main">
<header>
<div class="indent">
<nav>
<ul class='menu'>
<li><a class='active' href='index.php?Choix=1_' >Home</a></li>
<li><a href='index.php?Choix=2_' >Who Are We</a></li>
<li><a href='index.php?Choix=3_' >Our Services</a></li>
<li><a href='index.php?Choix=4_' >Our Team</a></li>
<li><a href='index.php?Choix=7_' >Reach Us</a></li>
<li> </li>
</ul>
</nav>
</div>
</header>
</div>
</div>
</body>
</html>