Is there a way to create a full width horizontal navigation without using a table?

I have a horizontal navigation with variable width 'buttons'. I would like the navigation to span the entire width of the containing div. I was able to accomplish this if I put the navigation in a table. You can check out this example. The table cells will resize according to how many there are and the width of the text inside them.

Can this be accomplished without using a table?

Edit: To clarify, I need to have the button widths be flexible. The client can update the number of buttons and the text of those buttons at any time through the cms. I need a solution that d开发者_JS百科oesn't require an update to the css.

Use a list element

<ul>
  <li><a href="...">entry 1</a></li>
  <li><a href="...">entry 2</a></li>

   ... etc

</ul>

Apply a 'float:left;' and a percentage-based width to the each of the 'li' elements. The width you choose will obviously depend on the number of entries you have. To ensure the elements clear properly apply an 'overflow: hidden' to the parent ('ul') element.

EDIT:

Maybe equal distribution of horizontal space actually isn't desirable in all cases?

• If you have few elements, the visual effect is going to be very different to a full navigation bar.
• There will be a point where you have to artificially limit the number of of element which can be added.

An extension to approach detailed above might be to right align the last 'li' element - which would provide you with a navigation bar of fixed with.

Personally, I see nothing wrong with using tables for this. I feel that all the people who look down on us table users are soft in the head.

However, you could do it in CSS with a bunch of DIVs floating next to one another, each of which has a width of a fixed %age of the overall width.

Ken,

I'm not sure on your skill with creating web elements and css, but there are also lots of open source solutions which don't use tables (and some that do).

Here's a few examples: http://phoenity.com/newtedge/horizontal_nav/ That is a great example that will show you both an "inline" version and a "block" version. The reason for the two is to make it more dynamic. An "inline" version would use a specified width while the "block" version is made to fill up the whole parent element.

http://veerle.duoh.com/blog/comments/2_level_horizontal_navigation_in_css_with_images/ https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-5153115.html

An important part to note, if you are doing this for some form of company or something that will make money, is that you need to make sure that these are IE compatible (with 5.5-7) most of the good ones are, but some just refuse to put that compatibility in it. If you need help with that, I'm sure the community will help you out, I know I will.