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

#navul{
  display: block;
  margin: 0px auto;
  width: 600px;
}
#navulli {list-style: none}
#navullia{display:block; float: left; padding:5px62px00px; text-decoration:none; color:#000;}


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

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

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

</style><divid="nav"><ul><liclass="left"><ahref="#">Home</a></li><li><ahref="#">company</a></li><li><ahref="#">Products</a></li><li><ahref="#">Services</a></li><li><ahref="#">Involvement</a></li><li><ahref="#">Blog</a></li><liclass="right"><ahref="#">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...

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

#navullia {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;

}

#navul{
  display: block;
  margin: 000 -40px;
  width: 980px;
  font-size:20px;
}
#navulli {list-style: none}
#navullia{display:block; float: left; padding:5px68px00px; text-decoration:none; color:#fff;}


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

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