Xml gallery - horizontal placement - different widths?

Hey, I’m trying to make a scrolling gallery where you move your mouse left and it moves right etc, but i need to solve a small problem this is where i’m getting stuck first.

I want to display my images (that all have different widths) horizontally and next to each other. Tried a few things that didnt work.

here is the xml:

<select>
    <option photo="photos/lunch.jpg"></option>
    <option photo="photos/tentglow.jpg"></option>
    <option photo="photos/axel.jpg"></option>
    <option photo="photos/tent.jpg"></option>
    <option photo="photos/sunset.jpg"></option>
    <option photo="photos/storm.jpg"></option>
</select>

**here is my code: **

var myXML:XML = new XML();
var loader:MovieClipLoader = new MovieClipLoader();
loader.addListener(this);
myXML.ignoreWhite = true;
myXML.load("gallery.xml");
myXML.onLoad = function(success) {
    if (success) {
        var gallery:XMLNode = myXML.firstChild;
        for (i=0; i<gallery.childNodes.length; i++) {
            image = gallery.childNodes*.attributes.photo;
            var row = 116;
            createdimage = thumbsHolder_mc.attachMovie("emptyimg", "emptyimg"+i, thumbsHolder_mc.getNextHighestDepth());
            createdimage._y = 50;
            loader.loadClip(image,createdimage);
            if(i>0){
            createdimage._x = eval(thumbsHolder_mc["emptyimg"+(i-1)])._x+eval(thumbsHolder_mc["emptyimg"+i])._width;
            }
            
        }
    }
};

If someone you finds all this stuff really easy could help me that would be awesome!
I’m new to all this …

thanks