Hi there,

Ok, this has me really stumped.

I'd like to create a fluid horizontal navigation list of links, where the nav links are evenly spaced and take up the full width of the enclosing container. The Nav links are all different widths. The first link should be left-aligned and the last link should be right aligned. Something like this: http://img547.imageshack.us/img547/9901/screenxa.png. The problem I'm having is when the browser is resized keeping the elements equally spaced.

I've experimented with using table layout for the ul:

Code CSS:
ul {display: table;width: 100%;}
li {display: table-cell;}
a {display: block;}

giving each of the elements a percentage (working out the width of the text, dividing that by the max width of the page and then times by 100 for the percentage). I thought this would work but as the browser is resized the spacing is not maintained. Problem here is that I work out all the widths of the text and convert to percentages. All seven percentages added up come to 57.2%. I've then divided the remaining 42.8% by the seven list items and add that on to the percentage for each element. I think this is where I'm going wrong perhaps - I don't think dividing the remainder by 7 and then adding that on to each of the items is the correct thing to do

Code CSS:
header nav ul {width: 100%;overflow: hidden; height: 20px;position: relative}
header nav ul li {text-align:left;float:left;width: 14%}
header nav ul li.home {width: 10.3%}
header nav ul li.about {width: 11.4%}
header nav ul li.collections {width: 16.3%}
header nav ul li.stockists {width: 14.3%}
header nav ul li.trade-enquiries {width:18.6% }
header nav ul li.press {width: 10.8%}
header nav ul li.contact {width: 15.7%}

also using inline-block on the li elements as suggested by this article:


but nothing seems to keep the elements evenly spaced at all browser sizes.

Is there any way this can be achieved using CSS? I'm having quite a hard time finding a solution that works!