Setting the width of the page according to browser's width

Hey,

I have webpages that looked very good in resolution of width 1280 and higher, but then when i tried it with resolution 1024 it looked realy bad with horizontal scroll bar.
So i removed the advertisments on the sides of the page to make it look good with lower resolution.

What i want to do now is like that:
1-If page width >= 1280 then to show the ads on the sides
2-If page width < 1280 then to hide the ads on the sides

How can i do such thing?

Here is an example outputs:
Page 1-With no ads
http://www.carsandpixels.com/index.php?pa=1

Page 2-With ads
http://www.carsandpixels.com/index.php?pa=14

And i want to be:
-Page 1 to be with ads if width >=1280
-Page 2 to be without ads if width < 1280

Thanks in advance.

 

One way of doing this is to load up the ads anyway, and hide them if the browserwidth < 1280.
As to checking for browserwidth, this function might be helpfull;

		getBrowserSize : function () {
			var result = [];
			var aw =0;
			var ah=0;

			if( typeof( window.innerWidth ) == 'number' ) {
			//Non-IE
				aw = window.innerWidth;
				ah = window.innerHeight;
				//alert ('inner* aw='+aw+' ah='+ah);
			} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
			//IE 6+ in 'standards compliant mode'
				aw = document.documentElement.clientWidth;
				ah = document.documentElement.clientHeight;
				//alert ('docEl* aw='+aw+' ah='+ah);
			} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
				//IE 4 compatible
				aw = document.body.clientWidth;
				ah = document.body.clientHeight;
				//alert ('body* aw='+aw+' ah='+ah);
			};

			//var s = mb.desktop.scrollerSize;
			//aw -= s["width"];
			//ah -= s["height"];

			result["availWidth"] = aw;
			result["availHeight"] = ah;
			return result;
		},

Code (markup):