Question About Horizontal Menu

[solar]

w3schools site has top menu with some items sticking to the left side and some to the right. i studied page's code and could see that they made the menu using tables. the space between left side and right side td's is basically one td containing &nbsp.my question, which i couldn't figure out from the page's html and css, is how did they make the non-breaking space td stretch between left and right, basically fitting the remaining space?the code is this:

<tr style="height:20px"><td class="blacknav" style="border-left:none" width="50"><a class="m_item" href="/default.asp">HOME</a></td><td class="blacknav" width="50"><a class="m_item" href="/html/default.asp" target="_top">HTML</a></td><td class="blacknav" width="40"><a class="m_item" href="/css/default.asp" target="_top">CSS</a></td><td class="blacknav" width="40"><a class="m_item" href="/xml/default.asp" target="_top">XML</a></td><td class="blacknav" width="90"><a class="m_item" href="/js/default.asp" target="_top">JAVASCRIPT</a></td><td class="blacknav" width="40"><a class="m_item" href="/asp/default.asp" target="_top">ASP</a></td><td class="blacknav" width="40"><a class="m_item" href="/php/default.asp" target="_top">PHP</a></td><td class="blacknav" width="40"><a class="m_item" href="/sql/default.asp" target="_top">SQL</a></td><td class="blacknav" width="60"><a class="m_item" href="/sitemap/sitemap_tutorials.asp" target="_top">MORE...</a></td><td class="blacknav"> </td><td class="blacknav" width="80"><a class="m_item" href="/sitemap/sitemap_references.asp" target="_top">References</a></td><td class="blacknav" width="70"><a class="m_item" href="/sitemap/sitemap_examples.asp" target="_top">Examples</a></td><td class="blacknav" width="50"><a class="m_item" href="/forum/default.asp" target="_blank">Forum</a></td><td class="blacknav" style="border-right:none" width="50"><a class="m_item" href="/about/default.asp" target="_top">About</a></td></tr>

and i couln't find anything in the csshttp://www.w3schools.com/stdtheme.css

[ShadowMage]

Don't quote me on this , but I think it's because the table has a specified width...<table width="890"......and the blank td doesn't have a width specified while all the rest of the td's have a width.So, I think that since it's the only column without a width it will fill up whatever space is necessary to attain the table's width.Somebody please correct me if I'm wrong.

[jeffman]

That's exactly correct. Every other td element has a specified width. The empty td has no specified width, so it remains fluid. (It will stretch or shrink.) The non-breaking space gives the element "content" to ensure that it is rendered correctly in all browsers, new and old. (Some browsers would make a completely empty td element look like an empty space rather than a cell. I don't remember which browsers, if any, this remains true for, because I don't make tables in this way anymore.)

[solar]

thank you for your answers.i tried to do the same thing using a list, with some <li>'s floating to the right and others to the left. but it leaves white space between left and right and i can't figure out how to fill it with color so that it looks like one horizontal menu bar. colors and styles are assigned to <a>, and assigning background color to neither <ul> nor it's container doesn't work. i also tried inserting a list item with   and making it wide enough to reach to the other side, and it kind of solved my problem, but it doesn't fit when resizing windows and also it seems to me like a bad practice.here's how it looks on my pageso, how can i make that white space blue?

[ShadowMage]

Well, the trick mentioned before (with the td's) isn't going to work with li's. They're entirely different elements.You could however, put your list inside a wrapper div that has the background color you want.

[jeffman]

Your <ul> is probably 0px high, so no background-color displays. Give it a height, and it will. Common practice here is to define the <ul> and <li> elements with the same height (accounting for borders and padding also). If your line-height is the same as the height, the text will vertically center, no matter what font size it is.

[ShadowMage]

Duh! I forgot about the <ul>!!

[jeffman]

I happened to be tweaking a menu the other day, so it was fresh on my mind.I have yet to read a rational explanation why floated elements do not cause their containers' heights to expand. I have never encountered a situation where that worked to my advantage. Whenever I deal with it, I'm finding workarounds.I mean, I've read explanations. But they just sound descriptive. They never say why it's a good idea. It's perfectly understandable that the same thing should happen when an element has been positioned absolutely. But float is a very different thing. IMO.

[solar]

Your <ul> is probably 0px high, so no background-color displays. Give it a height, and it will. Common practice here is to define the <ul> and <li> elements with the same height (accounting for borders and padding also). If your line-height is the same as the height, the text will vertically center, no matter what font size it is.

tnx!that solved it