I'm having trouble making the individual "li" elements inside the "nav" element stretch to fill a 600px space defined by the class "grid_8" in the HTML. I've tried setting width:100%; for the nav, li { width: 100%;} and various other solutions without success. Seeking guidance from the experts!
<div class="container_12 clearfix">
<div class="grid_4">
<a href="index.html" alt="Above The Frey - Home page"><img alt="Above The Frey - Home page" src="images/newLogo.png" /></a>
</div>
<div class="grid_8">
<nav>
<ul id="nav">
<li><a href="schedule.html" >Schedule</a></li>
<li><a href="schedule.html" >Portfolio</a></li>
<li><a href="schedule.html" >Contact</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;
}`