I have an image gallery I found at > http://monc.se/kitchen/80/lightweigh...ith-thumbnails. Code for the whole thing I've set below.The main image display window is set w/ a fixed position w/ this CSS code:

#jgal li img { position: absolute; top: 20px; left: 220px; display: none; }
I want to use it on dynamic php pages that have constantly changing content. I cannot w/ the fixed position. I need it to float correctly to the right of the thumb sidebar images. I've set it into my .tpl pages & it works well w/ no apparant css conflicts. But the main window is still fixed while the thumbs show wherever I place their code. Any ideas how I can float it all as a unit? Example working not in the php page, just regular HTML > http://www.easysavannah.com/gallerytest4.html
The large image window on the right is fixed in position in the page. I need it to have a fixed position right where it's at now in relationship to the sidebar on the left. No matter where I place it's code. Thanks, Gene

Whole page code below:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Lightweight Image Gallery</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="imagetoolbar" content="false">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <style media="screen,projection" type="text/css">

/* general styling for this example */
* { margin: 0; padding: 0; }
body { padding: 20px; }

/* begin gallery styling */
#jgal { list-style: none; width: 200px; }
#jgal li { opacity: .5; float: left; display: block; width: 60px; height: 60px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; }
#jgal li img { position: absolute; top: 20px; left: 220px; display: none; }
#jgal li.active img { display: block; }
#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ }

/* styling without javascript */
#gallery { list-style: none; display: block; }
#gallery li { float: left; margin: 0 10px 10px 0; }

    </style>

    <!--[if lt IE 8]>
    <style media="screen,projection" type="text/css">
        #jgal li { filter: alpha(opacity=50); }
        #jgal li.active, #jgal li:hover { filter: alpha(opacity=100); }
    </style>
	<![endif]-->
    <script type="text/javascript">document.write("<style type='text/css'> #gallery { display: none; } </style>");</script>
    <!--[if lt IE 6]><style media="screen,projection" type="text/css">#gallery { display: block; }</style><![endif]-->
    <script type="text/javascript">
var gal = {
    init : function() {
        if (!document.getElementById || !document.createElement || !document.appendChild) return false;
        if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal';
        var li = document.getElementById('jgal').getElementsByTagName('li');
        li[0].className = 'active';
        for (i=0; i<li.length; i++) {
            li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
            li[i].style.backgroundRepeat = 'no-repeat';
            li[i].title = li[i].getElementsByTagName('img')[0].alt;
            gal.addEvent(li[i],'click',function() {
                var im = document.getElementById('jgal').getElementsByTagName('li');
                for (j=0; j<im.length; j++) {
                    im[j].className = '';
                }
                this.className = 'active';
            });
        }
    },
    addEvent : function(obj, type, fn) {
        if (obj.addEventListener) {
            obj.addEventListener(type, fn, false);
        }
        else if (obj.attachEvent) {
            obj["e"+type+fn] = fn;
            obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
            obj.attachEvent("on"+type, obj[type+fn]);
        }
    }
}

gal.addEvent(window,'load', function() {
    gal.init();
});
    </script>
</head>
<body>
<ul id="gallery">
    <li><img src="http://monc.se/kitchen/stew/gallery/images/je_1.jpg" alt="Josef &amp; Erika 1"></li>
    <li><img src="http://monc.se/kitchen/stew/gallery/images/roland_ads_2.jpg" alt="Roland Ads"></li>
    <li><img src="http://monc.se/kitchen/stew/gallery/images/cd_2.jpg" alt="CD Cover 2"></li>
    <li><img src="http://monc.se/kitchen/stew/gallery/images/cd_1.jpg" alt="CD Cover 1"></li>
    <li><img src="http://monc.se/kitchen/stew/gallery/images/je_3.jpg" alt="Josef &amp; Erika 3"></li>
    <li><img src="http://monc.se/kitchen/stew/gallery/images/je_2.jpg" alt="Josef &amp; Erika 2"></li>
    <li><img src="http://monc.se/kitchen/stew/gallery/images/lktrd_poster1.jpg" alt="LKTRD Poster"></li>
    <li><img src="http://monc.se/kitchen/stew/gallery/images/je_4.jpg" alt="Josef &amp; Erika 4"></li>
    <li><img src="http://monc.se/kitchen/stew/gallery/images/inside_1.jpg" alt="Inside Magazine"></li>
    <li><img src="http://monc.se/kitchen/stew/gallery/images/oceanen_4.jpg" alt="Oceanen"></li>
</ul>

<p style="clear: both; padding-top: 2em;">Link back to article: <a href="http://monc.se/kitchen/80/lightweight-image-gallery-with-thumbnails">Lightweight Image Gallery with Thumbnails</a>.</p>
</body>
</html>