Горизонтальная прокрутка with overflow-x

Мне было интересно, нет ли еще хорошего способа заставить div растягивать и прокручивать по горизонтали в соответствии с изображениями внутри. Ведь сейчас 2011 год!

Мегапространство делает свое дело, но оставляет пустое мегапространство , если оно не заполнено изображениями.
Если заливка слишком большая, изображения не отображаются. То же самое и с jQuery. Приведенная ниже ситуация - лучшее, что я могу сделать после нескольких часов работы в Google, но она недостаточно надежна.

Спасибо за ваше время.

* {
  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>