Hello fellow programmers,
I was wondering if there still isn't a good way to get a div to stretch and scroll horizontally, according to the images inside.

-After all, it is 2011 now!

The mega-width does the trick, but leaves an empty mega-space if not filled with images.
If filled too much, images don't display. Same for the jQuery. The situation below is the best I can do after hours of Googling, but it isn't reliable enough.

Thanks for your time.
Ams

* {
margin:0;
padding:0;
}

#one {
width:200px;    
height:250px;
overflow-x:auto;
overflow-y:hidden;
}

#two {
width:10000em;
}

#two img {
float:left;
}


$(document).ready(function(){
var total=0;
$(".calc").each(function(){
total += $(this).outerWidth(true);
});
$("#two").css('width',total);
alert(total);
});



<div id="one">
<div id="two">
<img src="images/testimage3.jpg" width="480" height="192" class="calc">
<img src="images/testimage3.jpg" width="480" height="192" class="calc">
<img src="images/testimage3.jpg" width="480" height="192" class="calc">
<img src="images/testimage3.jpg" width="480" height="192" class="calc">
</div>
</div>