Horizontal Menu Ul Align Right And Align Left

I've searched through everything and can't seem to find an exact fix for this. It seems pretty simple but I've been beating my head against a wall lately trying to get it just rig

Solution 1:

you should not work here with different float values. use instead float: left for all li and position the first and last element absolute. the wrapper box #nav should be positioned relative.

<style>

#nav{
  position: relative;
  width:980px;
  margin:0;
  padding:0;
  height: 100px;
  border:1px solid red; 
}

#nav ul{
  display: block;
  margin: 0px auto;
  width: 600px;
}
#nav ul li {list-style: none}
#nav ul li a{display:block; float: left; padding:5px 62px 0 0px; text-decoration:none; color:#000;}


.left{
  position: absolute;
  top: 0px;
  left: 10px;
  text-align: left;
}

.right{
  position: absolute;
  top: 0px;
  right: 10px;
}

.right a {  padding-right: 0 !important;}

</style>

 <div id="nav">
           <ul>
                 <li class="left"><a href="#">Home</a></li>
                 <li><a href="#">company</a></li>
                 <li><a href="#">Products</a></li>
                 <li><a href="#">Services</a></li>
                 <li><a href="#">Involvement</a></li>
                 <li><a href="#">Blog</a></li>
                 <li class="right"><a href="#">Contact Us</a></li>
             </ul>
 </div> <!-- End Nav -->

Solution 2:

well, it's not ideal, but you could get the approximate result by using this as your css...

#nav ul{
    width:980px;
    margin:0;
    padding:0;
    border:1px solid red;
}
#nav ul li{ float:left;color:#fff;width:16%;}

#nav ul li a {display:block;text-decoration:none; color:#FFF;}
}

That's just playing off of the fact that since we know you have 6 items in the list, each item should take up approximately 16% of the space.

Solution 3:

Your code here and the code you have provided in your jsfiddle link have differences, for instance you haven't posted #nav tag here. Adjust the width of your width nav ul bar, there is no problem for me, it renders fine with the Contact us link stretched to the far end and everything else equally spaced out.

Solution 4:

try this:

http://jsfiddle.net/Szv5x/

I used display: inline-block, changed the padding, set a width to make the menu fill the width you specified with evenly spaced items.

Solution 5:

That was very close to fixing it. I got it though with a little alteration to your code. Thanks a ton!!:

#nav{
  position: relative;
  width:980px;
  margin:0 auto;
  padding:0;
  height: 40px;

}

#nav ul{
  display: block;
  margin: 0 0 0 -40px;
  width: 980px;
  font-size:20px;
}
#nav ul li {list-style: none}
#nav ul li a{display:block; float: left; padding:5px 68px 0 0px; text-decoration:none; color:#fff;}


.right{
  position: absolute;
  top: 0px;
  right: 10px;
}

.right a {  padding-right: 0 !important;}