How to stretch a fixed number of horizontal navigation items evenly and fully across a specified container

Question

I d like to stretch 6 nav items evenly across a 900px container  with an even amount of white space between   For instance     ---  900px Container  ---  ---  HOME    ABOUT    BASIC SERVICES    SPECIALTY SERVICES    OUR STAFF    CONTACT US  ---   Currently  the best method I can find to do this is the following   nav ul     width  900px     margin  0 auto     nav li     line-height  87px    float  left    text-align  center    width  150px      The PROBLEM with this is two fold   First of all  it doesn t truly justify it  but rather spreads the li tags evenly throughout the ul tag   creating uneven white-space between smaller menu items like  HOME  or  ABOUT  and larger ones like  BASIC SERVICES    The second problem is that the layout breaks if a nav item is larger than 150px  which SPECIALTY SERVICES is - even though there is more than enough space for the whole nav   Can anyone solve this for me   I ve been scouring the web for solutions  and they all seem to come up short   CSS   HTML only if possible     Thanks   UPDATE  7 29 13   Using table-cell is the best modern way to implement this layout   See felix s answer below   The table cell property works on 94  of browsers currently   You ll have to do something about IE7 and below  but otherwise should be ok   UPDATE  7 30 13   Unfortunately  there is a webkit bug that impacts this if you re combining this layout with Media Queries   For now you ll have to avoid changing the  display  property   See Webkit Bug   UPDATE  7 25 14   There is a better solution to this below now involving text-align  justify  Using this is simpler and you ll avoid the Webkit bug

User · Accepted Answer

Use text-align justify on the container  this way it will work no matter how many elements you have in your list  you don t have to work out   widths for each list item   x000D   x000D       nav   x000D          text-align  justify  x000D          min-width  500px  x000D        x000D       nav after   x000D          content      x000D          display  inline-block  x000D          width  100   x000D        x000D       nav li   x000D          display  inline-block  x000D        x000D   lt ul id  nav  gt  x000D       lt li gt  lt a href     gt HOME lt  a gt  lt  li gt  x000D       lt li gt  lt a href     gt ABOUT lt  a gt  lt  li gt  x000D       lt li gt  lt a href     gt BASIC SERVICES lt  a gt  lt  li gt  x000D       lt li gt  lt a href     gt OUR STAFF lt  a gt  lt  li gt  x000D       lt li gt  lt a href     gt CONTACT US lt  a gt  lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    FIDDLE

How to stretch a fixed number of horizontal navigation items evenly and fully across a specified container

The Solution to How to stretch a fixed number of horizontal navigation items evenly and fully across a specified container is

Most Viewed Questions: