how to fill a horizontal area?

[ElemenoP]

I have a series of left-floating divs used as a horizontal nav. Here is my code:

<div style="width:770">
<a href="#" style="cursor:hand;text-decoration:none"><div class="sectorBar" style="background-color:#ced1d8;">
<div class="sectorBarText" style="color:#68675C;">Legal</div>
</div></a>
<a href="#" style="cursor:hand;text-decoration:none"><div class="sectorBar" style="background-color:#545445;">
<div class="sectorBarText">Financial Services</div>
</div></a>
<a href="#" style="cursor:hand;text-decoration:none"><div class="sectorBar" style="background-color:#b7bbc6;">
<div class="sectorBarText">Media</div>
</div></a>
<a href="#" style="cursor:hand;text-decoration:none"><div class="sectorBar" style="background-color:#abb0bd;">
<div class="sectorBarText">Technology</div>
</div></a>
<a href="#" style="cursor:hand;text-decoration:none"><div class="sectorBar" style="background-color:#9da2b1;">
<div class="sectorBarText">Office</div>
</div></a>
</div>

This is all I have right now for the SectorBar style:

.sectorBar {
float:left;height:28px;
}

I would like the sectorBar divs to "fill" the 770px space equally. In this example each div should be 154px. There could be more or fewer divs so I can't hard code by pixel or percent. Basically, I want it to behave like a TABLE (ah, how I miss them). Any ideas?

[ElemenoP]

Oops, the first div should be <div style="width:770px">

[swa66]

Perhaps a dirty workaround:

Push the CSS out of the html

next set the width for different number of
elements in the line

Something like:

.menu2 {width: 50%;...}
.menu3 {width: 33%;...}
.menu4 {width: 25%;...}
.menu5 {width: 20%;...}

Now all you need to do is set the right class in the html, telling the CSS how many elements to expect.

It's a dirty trick, but I'll admit to use it to style ... complex tables ... [for the record: they contain matrix data, but are just very complex, and to keep it all a bit in check ...]

[swa66]

Just a few more smaller remarks:

Accessability rules tell us it's bad to have <a>...</a> <a>...</a>
screen readers have trouble with that.
For a menu the most common solution is to go
<ul class="menu">
<li><a href="#">item</a></li>
...
</ul>

the double div inside the <a> seems to be way to much. You can style the <a> itself. Unless you need them for something else.

after that you can style the .menu to remove the list layout, put them one after the other etc.

[ElemenoP]

Thank you for the suggestions.

Sheri