Forum Moderators: not2easy

Message Too Old, No Replies

Inline list total width

         

wesg

2:02 am on Oct 10, 2008 (gmt 0)

10+ Year Member



I have an unordered list with about 8 items that I am using as a horizontal navigation bar. The widths don't need be the same, but I want the entire list to fill out the entire containing div element. What can I do to add that?

<div id="navmenu">
... unordered list ...
</div>

CSS
#navmenu {width: ?;}

this doesn't really work.

swa66

11:01 am on Oct 10, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



My first idea was to make the menu inline and then use text-align:justify. Much as I did here: [webmasterworld.com...] and used text-justify:center there.

But that won't work as text-align:justify doesn't justify the "last" (only) line in an paragraph. The settings to change ( text-align-last: justify; [w3.org]) that behavior are in CSS3, but unfortunately not in our browsers.

So you'll have to settle for less "neat" solutions for now I'm afraid.
8 blocks in a space could use "width: 12.5%". Be ready to deal with longer items as thy might not fit anymore as well as your last item not reaching up to the end etc.