Horizontal Menu ul align right and align left

Question

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 right.

I have a simple horizontal menu on a website. I am using an UL to make it all work. Here is my code:

> <div id="nav">
>           <ul>
>                 <li><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 -->

My Css is as follows:

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

#nav ul li a {display:block;padding:5px 62px 0 0px; text-decoration:none; color:#FFF}
#nav ul li.right{float:right;margin-right: -30px;
}

The Problem I am having is that the last item will align right but now there is a huge space between the second to last tab and the last tab. This is because of the padding left I have in the li a portion. I just want the first text to align left and the last text to align right and the others in between to have consistent space. You can see the issue here:http://jsfiddle.net/nathan1342/sPZG9/

Any help would be very much appreciated!!

Thanks!

Answer 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 -->

Answer 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.

Answer 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.

Answer 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.

Answer 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;}