Stretching <li> to fill a horizontal Nav menu, within a 960 grid 12 col

nosize

New Member
Im trying to stretch the individual "li" elements within the "nav" element to fill the space that is 600px as defined in the HTML by the class="grid_8" in the that houses the "ul" Ive tried putting width:100%; in the nav, li { width: 100%;} and some various forms of that solution. No avail. I look to you masters!\[code\]<div class="container_12 clearfix" > <div class="grid_4"><!--logo--> <a href="http://stackoverflow.com/questions/12775340/index.html" alt="Above The Frey - Home page"> <img alt="Above The Frey - Home page" src="http://stackoverflow.com/questions/12775340/images/newLogo.png" /> </a> </div> <div class="grid_8"> <nav><!-- navigation--> <ul id="nav"> <li> <a href="http://stackoverflow.com/questions/12775340/schedule.html" >Schedule</a> </li> <li> <a href="http://stackoverflow.com/questions/12775340/schedule.html" >Portfolio</a> </li> <li> <a href="http://stackoverflow.com/questions/12775340/schedule.html" >Conntact</a> </li> <li class="stretch"></li> </ul> </nav> </div></div><!--video Container--><div class="container_12" id="videoContainer"><iframe id="videoBorder" width="560" height="315" src="http://www.youtube.com/embed/fEJOYp3ciD0" frameborder="0" allowfullscreen></iframe></div></html>Body {background-image: url("images/background.jpg");}#nav{padding:0;background-color: #333333;text-align: justify;}#nav li {display:inline;width:100%;width: 33%;text-align: center;}#nav li a { font-family:Arial; font-size:12px; text-decoration: none; float:left; padding:10px; background-color: #333333; color:#ffffff; border-bottom:1px; border-bottom-color:#000000; border-bottom-style:solid; margin-top: 100px;}#nav li a:hover { background-color:#9B1C26; padding-bottom:12px; border-bottom:2px; border-bottom-color:#000000; border-bottom-style:solid; margin: 0px; margin-top: 100px;}#nav.stretch { display: inline-block; width: 100%; /* if you need IE6/7 support */ display: inline; zoom: 1;} #videoContainer { background-color: #1f1f1f; padding: 20px;}`\[/code\]
 
Back
Top