Problema al cambiar ancho de imagenes

[keko123]

Hola, tengo un problema con ajustar el tamaño de unas imagenes con javascript y aver si alguien me puede ayudar.

La web muestra varias carpetas, que pueden contener hasta 20 imagenes cada una. Al seleccionar cada carpeta se muestran las imagenes que tiene dentro en un div. El problema es que calculo el ancho maximo de cada imagen en funcion del numero de imagenes. Todo esto lo hago con la funcion mostrar carpeta:

Código HTML:

function mostrar_carpeta(img,fecha1,fecha2,titulo,descripcion,img1,img2,img3,img4,img5,img6,img7,img8,img9,img10,img11,img12,img13,img14,img15,img16,img17,img18,img19,img20)
{
	document.getElementById('promo_img').innerHTML="<div><a class=\"button\" href=\"javascript:ampliar('"+img+"')\">ampliar</a><img id=\"promo_img_mostrar\" /></div>";
	var img_ad= new Array(21);
	img_ad[1]=img1;
	img_ad[2]=img2;
	img_ad[3]=img3;
	img_ad[4]=img4;
	img_ad[5]=img5;
	img_ad[6]=img6;
	img_ad[7]=img7;
	img_ad[8]=img8;
	img_ad[9]=img9;
	img_ad[10]=img10;
	img_ad[11]=img11;
	img_ad[12]=img12;
	img_ad[13]=img13;
	img_ad[14]=img14;
	img_ad[15]=img15;
	img_ad[16]=img16;
	img_ad[17]=img17;
	img_ad[18]=img18;
	img_ad[19]=img19;
	img_ad[20]=img20;
	var num_img;
	num_img=1;
	for (var e=1;e<=20;e++){
		if (img_ad[e]!=""){
		num_img++;
		}
	}
	var ancho = (740/parseInt(num_img))-(20);
	/*!if (document.all){
	  	document.styleSheets[0].addRule('.promo_img div img', 'max-width:'+ancho+'px;',2)
  	}
 	else{
	  	document.styleSheets[0].insertRule('.promo_img div img{max-width:'+ancho+'px;}',2)
  	} */
	document.getElementById('promo_img_mostrar').src=img;
	document.getElementById('promo_img_mostrar').width=ancho;
	document.getElementById('promo_img_mostrar').style.display="inline";
	for (var i=1;i<=20;i++){
		if (img_ad[i] !=""){
			document.getElementById('promo_img').innerHTML+="<div><a class=\"button\" href=\"javascript:ampliar('"+img_ad[i]+"')\">ampliar</a><img id=\"promo_img_mostrar_"+i+"\" /></div>";
				document.getElementById('promo_img_mostrar_'+i).src=img_ad[i];
				document.getElementById('promo_img_mostrar_'+i).width=ancho;	
				document.getElementById('promo_img_mostrar_'+i).style.display="inline";	
		}
	}
}

El problema es que al modificar la hoja de estilos siempre toma el primer valor que le he dado, es decir, muestro la carpeta 1 que contiene 9 imagenes y asigna a cada imagen un ancho de 62 px. Si luego cargo la carpeta 2que cuenta con una imagen, aunque calcula bien el ancho de 720 px, muestra la imagen nuevamente con 62 px de ancho. Es como si el navegador guardara en la cahe el css la primera vez y luego usase siempre el mismo aunque lo cambie.

La unica forma que he logrado de arreglarlo es usando la propiedad width de cada imagen para darle el ancho.

La parte que me gustaria que funcionase es la que esta puesta como comentario, pudiendo eliminar las lineas :
document.getElementById('promo_img_mostrar').width =ancho;

document.getElementById('promo_img_mostrar').width =ancho;


PD: perdon por el tocho