can js tell css what to do?

Hi,

I am cross posting this on the javascript branch because it seems to me it involves both css and js. Apologies if that's bad practice - if so, please let me know where it should be and I'll delete the other one.

Anyway, here's the thing: I made a nice little navigation bar out of divs that looks fine on my screen (1280 x 720) but my friend told me that it runs off-screen on his screen (1024 x 600) and then my other friend said that on his screen (1920 x 1080) it barely reaches halfway across.

Obviously I'd like it to look more or less the same on most computers.

So after looking around for a bit, I found this (http://javascript.about.com/library/blscreen1.htm) page which talks about a js code that basically measures the screen space.

Now, being that the only way I can find to make the navigation bar "fit" in different screen resolutions is to change the font size of the text inside the divs, I figured that something like this:

<script type="text/javascript">
if (pageWidth() > 600) {
<style type="text/css">
.navbar {font-size:40%;}
</style>
}
</script>

added to the body of the document might have some effect, but it seems not.

here's the page (http://www.xelawho.com/map/navtest.htm) I'm working on

and the js file I'm using is here (http://www.xelawho.com/map/getscreen.js)

So, to my question (finally): am I writing the code wrong, or is it not possible to control text size in this way?

Or is there a better way to go about this?

thanks for any suggestions.

Im confused. You dont need js to design a fluid website. Thats what they are for, to stretch and shrink to fit different browers and screens. Here (http://www.devwebpro.com/css-fluid-layout-tutorial/)is a good example and tutorial for fluid layouts.

I'm confused, too. Especially since I asked basically this question here a couple of days ago and didn't hear about any of this stuff.

But the way I understand it, fluid websites are fine for resizing divs that have space to stretch and shrink, but the divs like I have that exactly fit the text that holds them can't shrink because they will always only be as small as the text inside.

Hence the need for text resizing. Or am I completely confused about this?

Anyway. Over on the js forum they're suggesting one seemingly-complicated method or else Media Queries (http://css-tricks.com/css-media-queries/) which seems to work nicely, although only on modern browsers