Guarda questo codice di esempio..l'immagine barra_03.png è un semplice rettangolo colorato.
Vedilo in FF e poi in IE, vedrai che pippo si è ridimensionato...vorrei non definire a priori le dimensioni.
codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="/js/Scriptaculous/lib/prototype.js" type="text/javascript"></script>
<title>Documento senza titolo</title>
</head>
<style>
div
{
border:1px solid #000000;
padding:10px;
margin:10px;
}
.divContainer
{
background-color:#E2E7EC;
position:relative;
padding:0;
overflow:auto;
}
.divBar
{
padding:0;
margin:0;
/*background-image:url(images/barra_01.png);*/
background-position:right;
background-repeat:repeat-y;
border-width:0px 0px 0px 0px;
border-style:solid;
border-color:#E2E7EC;
width:7px;
}
.divClear{margin:0;padding:0;clear:both;overflow:auto;display:none;}
</style>
<body>
<div id="paperino" style="background-color:#FFFF00;">
PAPERINO
</div>
<div id="pippo" style="background-color:#FF99CC;">
PIPPO
PIPPO
PIPPO
PIPPO
PIPPO
PIPPO
PIPPO
</div>
<div id="pluto" style="background-color:#00CC00;">
PLUTO
</div>
</body>
</html>
<script>
/*
DOM INIZIALE
PADRE
|- DIV 1
|- DIV 2 (Da Modificare)
|- DIV 3
DOM FINALE
PADRE
|- DIV 1
|-CONTENITORE DIV 2
|- DIV 2 (Da Modificare)
|- DIV 3
*/
id="pippo";
divWork=$(id);
wDivWork=$(id).getWidth();//larghezza di lavoro
hDivWork=$(id).getHeight();//altezza dei div da lavorare
//Duplico il div di lavoro e gli pulisco la classe
divClone=divWork.cloneNode(true);
//Trovo il Padre del div di lavoro a cui appenderò i nuovi figli
Father=divWork.parentNode;
//Creo il contenitore
divContainer = document.createElement('div');
divContainer.setAttribute("id","Container_"+divWork.id);
divContainer.className="divContainer";
//Inserisco dal padre il nuovo div contenitore prima di quello di lavoro
Father.insertBefore(divContainer,divWork);
//Rimuovo il Nodo spostato
Father.removeChild(divWork);
//Creo il Div della barra
divBar = document.createElement('div');
divBar.setAttribute("id","divBar_"+divWork.id);
divBar.className="divBar";
divBar.style.cssFloat="left";
barImage=new Image();
barImage.src="images/barra_03.png";
divClear = document.createElement('div');
divClear.className="divClear";
divBar.appendChild(barImage);
divContainer.appendChild(divClone);
divClone.style.margin=0;
divClone.style.overflow="auto";
divClone.style.cssFloat="left";
divClone.style.display="block";
divContainer.appendChild(divBar);
divContainer.appendChild(divClear);
</script>