CSS justifying spans across fixed-width div

Content | Comprehension | Cool Stuff | Differentiated Instruction | About GRS

This text navigation above goes in a DIV that is 720px wide. Want to put each item in a span and then have the div justify the spans evenly across the 720px div.

Each item should be in a span because I need a normal space between words in two-word items and bigger spaces between the spans and the verticle bars. Need no line breaks.

.subnav div {
width: 720px;
height:22px;
border: 0px;
margin: 0px auto;
text-align:justify;
vertical-align: middle;
}
<div class="subnav">
<span class="subdiv">Content</span> |
<span class="subdiv">Comprehension</span> |
<span class="subdiv">Cool Stuff</span> |
<span class="subdiv">Differentiated Instruction</span> |
<span class="subdiv">About GRS</span>
</div>

Having trouble vertical-aligning to middle also.

Is this possible? Any tips or hints? Thanks!

A much better (and semantic) option would be to use a list.

http://css.maxdesign.com.au/listamatic/horizontal33.htm

Lots of other types of menus listed on there also which should show you how you could achieve this.