Change class value depending on client's screen width

Hello all.

I have a custom div in my page.tpl.php file where I print some text by the following way:

<div id="info" class="screen">
...
</div>

I style this in css for the time being as:

#info{
....
}

But I have a problem with different screen resolutions that's why I added the class so that I could change the class value for different resolutions that would be detected by javascript code so that I could style ti like this:

#info .classVal1{
...
}
#info .classval2{
...
}
/* and so on ... */

Thus I added this javascript code in a detectSreen.js file:

	window.onload = setScreenClass;
	window.onresize = setScreenClass;

	function setScreenClass(){
		var fmt = document.documentElement.clientWidth;
		var cls = (fmt<=1024)?'narrow': (fmt<=1152)?'medium': (fmt<=1280)?'large': 'wide';
		document.getElementById('info').className = cls;
	}

I am not very good with js but I think this should do the trick.
The file is included from drupal (both page source and firebug confirm this). I also can't find any relative errors in firebug.
However I am still geting:

<div id="info" class="screen">

in firebug ....
instead of:

<div id="info" class="narrow">
/* or */
<div id="info" class="wide">
/*and so on */

Does anyone know why class value never change? Can I follow some debugging proccess for this?