Hi there

I'm using the Two level CSS Tabs menu and have become a bit unstuck as to how to position the menu at 100% of the div that it's contained within - see http://www.adclweb.com/dev/st-oseaisland

I need the main navigation to stretch to 100% of the containing div and have a 1px width in between each navigation header:

here's my code:

#maintab{
padding: 0px 0px 0px 5px;
margin-left: 5px;
margin-right:0px;
margin-top:3px;
margin-bottom: 4px;
font: bold 12px Verdana;
list-style-type: none;
}

#maintab li{
display: inline;
margin: 0px;
padding:0px 2px;
}

#maintab li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 0px;
margin-left:0px;
border: 1px solid #FFFFFF;
color: #FFFFFF;
background: #126260;
}

#maintab li a:hover{
color: #FFFFFF;
background: #00A0AF;
}

#maintab li.selected a{ /*selected main tab style */
background-color: #DD7D26;
border-color: #FFFFFF;
}


.widthspan {
padding-left:18px;
padding-right:18px;
}

<ul id="maintab">
<li><a href="home.asp" title="Home"><span class="widthspan">Home</span></a></li>
<li><a href="addiction.asp" title="Addiction"><span class="widthspan">Addiction</span></a></li>
<li><a href="grouptherapy.asp" title="Therapy"><span class="widthspan">Therapy</span></a></li>
<li><a href="facilities.asp" title="Facilities"><span class="widthspan">Facilities</span></a></li>
<li><a href="expertise.asp" title="Expertise"><span class="widthspan">Expertise</span></a></li>
<li><a href="press.asp" title="Press"><span class="widthspan">Press</span></a></li>
<li><a href="testimonials.asp" title="Press"><span class="widthspan">Testimonials</span></a></li>
<li class="selected"><a href="nextstep.asp" title="Next Step"><span class="widthspan">Next Step</span></a></li>
</ul>



can anyone help?

thanks

Adam